Components

Button Row(React)

Consistent spacing between buttons.

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

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 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
    node
    Default
    null
  • justify

    Controls the horizontal alignment of buttons within the container.

    Type
    oneOf([
      'center',
      'left',
      'right',
    ]);
    Default
    'left'
  • isStackedBelowSmall

    Stack items below the small breakpoint. This pairs well with width="full-below-small" for buttons

    Type
    bool
    Default
    false
  • dataTest

    A selector hook into the React component for use in automated testing environments.

    Type
    string
    Default
    undefined