Button Row

Consistent spacing between buttons

Button placement

Default (Left)

<ButtonRow>
  <Button>
    Click Me
  </Button>
  <Button theme="secondary">
    Click Me
  </Button>
</ButtonRow>

Center

<ButtonRow justify="center">
  <Button>
    Click Me
  </Button>
  <Button theme="secondary">
    Click Me
  </Button>
</ButtonRow>

Right

<ButtonRow justify="right">
  <Button>
    Click Me
  </Button>
  <Button theme="secondary">
    Click Me
  </Button>
</ButtonRow>

Stacked at Small

Best used with "full-below-small" on the children.

Note: this reverses the order of the buttons on small screens as well, per our design guidelines which require primary action buttons to be on the right of a row, but on top when stacked.

<ButtonRow
  isStackedBelowSmall
  justify="right"
>
  <Button
    theme="secondary"
    width="full-below-small"
  >
    Click Me
  </Button>
  <Button width="full-below-small">
    Click Me
  </Button>
</ButtonRow>

Props

ButtonRow

children
Button components to render.

Type
React.ReactNode
Default
null
justify
Controls the horizontal alignment of buttons within the container.

Type
'center' | 'left' | 'right'
Default
'left'
isStackedBelowSmall
Stack items below the small breakpoint. This pairs well with width="full-below-small" for buttons

Type
boolean
Default
false
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string
dataTest
deprecated
A selector hook into the React component for use in automated testing environments.

Note:
Deprecated in favor of the dataTestId prop

Type
string