Button

Clickable elements used to perform actions

Button themes

These are the available Button styles for use on light background colors.

<ButtonRow>
  <Button>
    Primary
  </Button>
  <Button theme="secondary">
    Secondary
  </Button>
  <Button theme="tertiary">
    Tertiary
  </Button>
  <Button theme="caution">
    Caution
  </Button>
</ButtonRow>

Use on dark backgrounds

The solid theme works well on dark backgrounds.

<Button theme="solid">
  Solid
</Button>

Small buttons

Buttons are large by default. The size prop allows you to render a small button.

<ButtonRow>
  <Button size="small">
    Primary
  </Button>
  <Button
    size="small"
    theme="secondary"
  >
    Secondary
  </Button>
  <Button
    size="small"
    theme="tertiary"
  >
    Tertiary
  </Button>
  <Button
    size="small"
    theme="caution"
  >
    Caution
  </Button>
</ButtonRow>

Disabled buttons

The isDisabled prop visually and functionally disables the button.

<ButtonRow>
  <Button
    isDisabled
    theme="primary"
  >
    Primary
  </Button>
  <Button
    isDisabled
    theme="secondary"
  >
    Secondary
  </Button>
  <Button
    isDisabled
    theme="tertiary"
  >
    Tertiary
  </Button>
  <Button
    isDisabled
    theme="caution"
  >
    Caution
  </Button>
</ButtonRow>

<ButtonRow>
  <Button
    isDisabled
    theme="solid"
  >
    Solid
  </Button>
</ButtonRow>

Full width buttons

<Button width="full">
  Send Quote
</Button>

Full width on small screens

This button becomes full width on viewports that are smaller than our small breakpoint. The width is auto on larger screens.

<Button width="full-below-small">
  Send Quote
</Button>

Icon within a button

The icon prop accepts any small icon from Thumbprint Icons. This prop renders an icon left within button.

<Button icon={<ContentModifierMessageSmall />}>
  Send Message
</Button>

Icon right within the button

iconRight renders an icon right within button.

<Button iconRight={<ContentModifierMessageSmall />}>
  Send Message
</Button>

Button with loading indicator

These loading indicators should be used when buttons are processing. They are available in the primary, secondary, and tertiary button themes.

<ButtonRow>
  <Button isLoading>
    Send Quote
  </Button>
  <Button
    isLoading
    theme="secondary"
  >
    Send Quote
  </Button>
  <Button
    isLoading
    theme="tertiary"
  >
    Send Quote
  </Button>
</ButtonRow>

Buttons that look like links

The TextButton component renders button elements that visually appear as text links. These buttons accept an onClick and render as inline elements.

<>
  The Pro exceeded our expectations and did a fantastic…{' '}
  <TextButton>
    Read more
  </TextButton>
</>

Adding an icon with text

The TextButton component provides a iconLeft prop to help vertically position icons alongside text.

<b>
  <TextButton iconLeft={<NavigationArrowLeftSmall />}>
    Back
  </TextButton>
</b>

Adding an icon with text on the right

The TextButton component also allows an icon to the right of the text.

<b>
  <TextButton iconRight={<NavigationArrowRightSmall />}>
    Forward
  </TextButton>
</b>

Icon that inherits color of parent

This icon inherits the color of its parent with theme="inherit".

<div
  style={{
    color: '#ffffff'
  }}
>
  <TextButton
    accessibilityLabel="Close"
    iconLeft={<NavigationCloseMedium />}
    theme="inherit"
  />
</div>

Changing the font size and weight

These buttons inherit the font size and font weight of their container.

<Text size={3}>
  The Pro exceeded our expectations and did a fantastic…{' '}
  <b>
    <TextButton>
      Read more
    </TextButton>
  </b>
</Text>

Props

Button

children
Contents displayed within the button.

Type
React.ReactNode
isDisabled
Visually and functionally disables the button.

Type
boolean
Default
false
isLoading
Boolean determining whether the button is in a loading state. When true the text will we replaced with a loading animation and interaction will be disabled.

Type
boolean
Default
false
icon
Icon from Thumbprint Icons to render left within the button. It must be one of the small icons.

Type
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right within the button. It must be one of the small icons.

Type
React.ReactNode
accessibilityLabel
Description of the button’s content. It is required if the button has an icon and no descriptive text.

Type
string
type
Button’s of type submit will submit a form when used within a form element.

Type
'button' | 'submit'
Default
'button'
onClick
Function that will run when the button is clicked on.

Type
(e: React.MouseEvent<HTMLElement>) => void
onMouseEnter
Function that runs when the user hovers on the button.

Type
(e: React.MouseEvent<HTMLElement>) => void
onMouseOver
Function that runs when the user hovers on the button. Unlike onMouseEnter, onMouseOver fires each time a child element receives focus.

Type
(e: React.MouseEvent<HTMLElement>) => void
onFocus
Function that runs when the button receives focus.

Type
(e: React.FocusEvent<HTMLElement>) => void
onMouseLeave
Function that runs when the user hovers away from the button.

Type
(e: React.MouseEvent<HTMLElement>) => void
onBlur
Function that runs when the button loses focus.

Type
(e: React.FocusEvent<HTMLElement>) => void
theme
Controls the button’s background, text, and border color.

Type
'primary' | 'secondary' | 'tertiary' | 'caution' | 'solid'
Default
'primary'
size
Changes the button's line-height, padding, border-radius, and font-size.

Type
'small' | 'large'
Default
'large'
width
Button components are as wide as the content that is passed in. The full option will expand the width to 100% on all screens. full-below-small will expand the width to 100% on devices smaller than our small breakpoint.

Type
'auto' | 'full' | 'full-below-small'
Default
'auto'
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string
form
Identifies which form to which the button is associated.

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

TextButton

children
Contents displayed within the button.

Type
React.ReactNode
iconLeft
Icon from Thumbprint Icons to render left of the text within TextButton.

Type
React.ReactNode
iconRight
Icon from Thumbprint Icons to render right of the text within TextButton.

Type
React.ReactNode
isDisabled
Visually and functionally disables the button. We discourage the use of this prop since it is difficult to visually indicate that a link is disabled. Consider not rendering the TextButton if it is not interactive.

Type
boolean
Default
false
onClick
Function that will run when the button is clicked on.

Type
(e: React.MouseEvent<HTMLElement>) => void
onMouseEnter
Function that runs when the user hovers on the button.

Type
(e: React.MouseEvent<HTMLElement>) => void
onMouseOver
Function that runs when the user hovers on the button. Unlike onMouseEnter, onMouseOver fires each time a child element receives focus.

Type
(e: React.MouseEvent<HTMLElement>) => void
onFocus
Function that runs when the button receives focus.

Type
(e: React.FocusEvent<HTMLElement>) => void
onMouseLeave
Function that runs when the user hovers away from the button.

Type
(e: React.MouseEvent<HTMLElement>) => void
onBlur
Function that runs when the button loses focus.

Type
(e: React.FocusEvent<HTMLElement>) => void
accessibilityLabel
Description of the button’s content. It is required if the button has an icon and no descriptive text.

Type
string
theme
Controls the button’s background, text, and border color. inherit will make the button inherit color from its parent.

Type
'primary' | 'secondary' | 'tertiary' | 'inherit' | 'caution'
Default
'primary'
type
Button’s of type submit will submit a form when used within a form element.

Type
'button' | 'submit'
Default
'button'
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string
form
Identifies which form to which the button is associated.

Type
string
width
Button components are as wide as the content that is passed in. The full option will expand the width to 100% on all screens. full-below-small will expand the width to 100% on devices smaller than our small breakpoint.

Type
'auto' | 'full' | 'full-below-small'
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