Components

Button Row(React)

Consistent spacing between buttons.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { ButtonRow } from '@thumbtack/thumbprint-react';`

Button placement

Default (Left)

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

<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>

<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>

<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 width="full-below-small" theme="secondary">
        Click Me
    </Button>
    <Button width="full-below-small">Click Me</Button>
</ButtonRow>

<ButtonRow isStackedBelowSmall justify="right">
    <Button width="full-below-small" theme="secondary">
        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
This prop can be one of the following 3 types:
'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