Components

Button Row(React)

Consistent spacing between buttons.

Version:14.18.2 View sourceChangelogReport issue
Install:yarn add @thumbtack/thumbprint-react
Import:import { ButtonRow } from '@thumbtack/thumbprint-react';

Button placement

Default (Left)

Center

Right

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.

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