diff --git a/src/components/Button/Button.test.tsx b/src/components/Button/Button.test.tsx
index 30ee01d4f7..a4932c8f67 100644
--- a/src/components/Button/Button.test.tsx
+++ b/src/components/Button/Button.test.tsx
@@ -40,6 +40,26 @@ describe('Button component', () => {
expect(queryByTestId('button')).toHaveClass(data[1])
})
})
+
+ it('renders uswds class for size small', () => {
+ const { queryByTestId } = render(
+
+ )
+ expect(queryByTestId('button')).toHaveClass('usa-button--small')
+ expect(queryByTestId('button')).not.toHaveClass('usa-button--big')
+ })
+
+ it('renders uswds class for size big', () => {
+ const { queryByTestId } = render(
+
+ )
+ expect(queryByTestId('button')).toHaveClass('usa-button--big')
+ expect(queryByTestId('button')).not.toHaveClass('usa-button--small')
+ })
})
it('implements an onClick handler', () => {
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 18fdfd8cfd..76d2af0a79 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -10,7 +10,14 @@ interface ButtonProps {
accent?: boolean
outline?: boolean
inverse?: boolean
+ size?: 'big' | 'small'
+ /**
+ * @deprecated since 1.5.0, use size
+ */
big?: boolean
+ /**
+ * @deprecated since 1.5.0, use size
+ */
small?: boolean
icon?: boolean
unstyled?: boolean
@@ -28,6 +35,7 @@ export const Button = (
accent,
outline,
inverse,
+ size,
big,
small,
icon,
@@ -36,6 +44,14 @@ export const Button = (
className,
} = props
+ let isBig = big || false
+ let isSmall = small || false
+ if (size === 'big') {
+ isBig = true
+ }
+ if (size === 'small') {
+ isSmall = true
+ }
const classes = classnames(
'usa-button',
{
@@ -44,8 +60,8 @@ export const Button = (
'usa-button--accent-cool': accent,
'usa-button--outline': outline,
'usa-button--inverse': inverse,
- 'usa-button--big': big,
- 'usa-button--small': small,
+ 'usa-button--big': isBig,
+ 'usa-button--small': isSmall,
'usa-button--icon': icon,
'usa-button--unstyled': unstyled,
},