diff --git a/packages/big-design/src/components/Badge/Badge.tsx b/packages/big-design/src/components/Badge/Badge.tsx
index e6d01e0c8..030bb3a29 100644
--- a/packages/big-design/src/components/Badge/Badge.tsx
+++ b/packages/big-design/src/components/Badge/Badge.tsx
@@ -5,9 +5,12 @@ import { MarginProps } from '../../mixins';
 import { StyledBadge } from './styled';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, MarginProps {
+  label: string;
   variant?: 'danger' | 'secondary' | 'success' | 'warning';
 }
 
-export const Badge: React.FC<BadgeProps> = memo(({ className, style, ...props }) => <StyledBadge {...props} />);
+export const Badge: React.FC<BadgeProps> = memo(({ className, style, label, ...props }) => (
+  <StyledBadge {...props}>{label}</StyledBadge>
+));
 
 Badge.displayName = 'Badge';
diff --git a/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap b/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap
index a080edd4b..b3b37c8c7 100644
--- a/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap
+++ b/packages/big-design/src/components/Badge/__snapshots__/spec.tsx.snap
@@ -7,9 +7,10 @@ exports[`render danger Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #DB3643;
 }
 
@@ -27,9 +28,10 @@ exports[`render default Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #5E637A;
 }
 
@@ -47,9 +49,10 @@ exports[`render secondary Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #5E637A;
 }
 
@@ -67,9 +70,10 @@ exports[`render success Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   background-color: #208831;
 }
 
@@ -87,9 +91,10 @@ exports[`render warning Badge 1`] = `
   display: inline-block;
   font-size: 0.75rem;
   font-weight: 600;
+  line-height: 1.25rem;
   text-align: center;
   text-transform: uppercase;
-  padding: 0.25rem 0.5rem;
+  padding: 0 0.5rem;
   color: #313440;
   background-color: #FFBF00;
 }
diff --git a/packages/big-design/src/components/Badge/spec.tsx b/packages/big-design/src/components/Badge/spec.tsx
index d081e8cb1..ff0574135 100644
--- a/packages/big-design/src/components/Badge/spec.tsx
+++ b/packages/big-design/src/components/Badge/spec.tsx
@@ -6,45 +6,45 @@ import React from 'react';
 import { Badge } from './index';
 
 test('has margin props', () => {
-  const { container, rerender } = render(<Badge />);
+  const { container, rerender } = render(<Badge label="Badge" />);
 
   expect(container.firstChild).not.toHaveStyle('margin: 1rem');
 
-  rerender(<Badge margin="medium" />);
+  rerender(<Badge label="Badge" margin="medium" />);
 
   expect(container.firstChild).toHaveStyle('margin: 1rem');
 });
 
 test('render default Badge', () => {
-  const { container } = render(<Badge>Badge</Badge>);
+  const { container } = render(<Badge label="Badge" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.secondary60}`);
 });
 
 test('render success Badge', () => {
-  const { container } = render(<Badge variant="success">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="success" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.success50}`);
 });
 
 test('render danger Badge', () => {
-  const { container } = render(<Badge variant="danger">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="danger" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.danger40}`);
 });
 
 test('render warning Badge', () => {
-  const { container } = render(<Badge variant="warning">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="warning" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.warning40}`);
 });
 
 test('render secondary Badge', () => {
-  const { container } = render(<Badge variant="secondary">Badge</Badge>);
+  const { container } = render(<Badge label="Badge" variant="secondary" />);
 
   expect(container.firstChild).toMatchSnapshot();
   expect(container.firstChild).toHaveStyle(`background-color: ${theme.colors.secondary60}`);
diff --git a/packages/big-design/src/components/Badge/styled.tsx b/packages/big-design/src/components/Badge/styled.tsx
index a6644bf9a..339e6eb2b 100644
--- a/packages/big-design/src/components/Badge/styled.tsx
+++ b/packages/big-design/src/components/Badge/styled.tsx
@@ -5,7 +5,7 @@ import { withMargins } from '../../mixins';
 
 import { BadgeProps } from './Badge';
 
-export const StyledBadge = styled.span<BadgeProps>`
+export const StyledBadge = styled.span<Omit<BadgeProps, 'label'>>`
   ${withMargins()};
 
   color: ${({ theme }) => theme.colors.white};
@@ -13,9 +13,10 @@ export const StyledBadge = styled.span<BadgeProps>`
   display: inline-block;
   font-size: ${({ theme }) => theme.helpers.remCalc(12)};
   font-weight: ${({ theme }) => theme.typography.fontWeight.semiBold};
+  line-height: ${({ theme }) => theme.lineHeight.small};
   text-align: center;
   text-transform: uppercase;
-  padding: ${({ theme }) => `${theme.spacing.xxSmall} ${theme.spacing.xSmall}`};
+  padding: 0 ${({ theme }) => theme.spacing.xSmall};
 
   ${({ theme, variant }) =>
     variant === 'secondary' &&
diff --git a/packages/docs/PropTables/BadgePropTable.tsx b/packages/docs/PropTables/BadgePropTable.tsx
index f32596605..02010c058 100644
--- a/packages/docs/PropTables/BadgePropTable.tsx
+++ b/packages/docs/PropTables/BadgePropTable.tsx
@@ -3,6 +3,12 @@ import React from 'react';
 import { Prop, PropTable, PropTableWrapper } from '../components';
 
 const badgeProps: Prop[] = [
+  {
+    name: 'label',
+    types: 'string',
+    description: 'The text applied to the component.',
+    required: true,
+  },
   {
     name: 'variant',
     types: ['danger', 'secondary', 'success', 'warning'],
diff --git a/packages/docs/pages/Badge/BadgePage.tsx b/packages/docs/pages/Badge/BadgePage.tsx
index 592d8a81b..5794b5c26 100644
--- a/packages/docs/pages/Badge/BadgePage.tsx
+++ b/packages/docs/pages/Badge/BadgePage.tsx
@@ -19,7 +19,7 @@ export default () => (
 
     <CodePreview>
       {/* jsx-to-string:start */}
-      <Badge variant="success">active</Badge>
+      <Badge label="active" variant="success" />
       {/* jsx-to-string:end */}
     </CodePreview>
 
@@ -40,10 +40,10 @@ export default () => (
     <CodePreview>
       {/* jsx-to-string:start */}
       <Grid gridColumns="repeat(4, min-content)">
-        <Badge variant="secondary">secondary</Badge>
-        <Badge variant="success">success</Badge>
-        <Badge variant="warning">warning</Badge>
-        <Badge variant="danger">danger</Badge>
+        <Badge variant="secondary" label="secondary" />
+        <Badge variant="success" label="success" />
+        <Badge variant="warning" label="warning" />
+        <Badge variant="danger" label="danger" />
       </Grid>
       {/* jsx-to-string:end */}
     </CodePreview>