Components

Button(React)

Clickable elements used to perform actions.

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

Button themes

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

Use on dark backgrounds

The solid theme works well on dark backgrounds.

Small buttons

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

Disabled buttons

The isDisabled prop visually and functionally disables the button.

Full width buttons

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.

Icon within a button

The icon prop accepts any small icon from Thumbprint Icons.

This prop renders an icon left within button.

Icon right within the button

iconRight renders an icon right within button.

Button with loading indicator

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

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…

Adding an icon with text

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

Adding an icon with text on the right

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

Icon that inherits color of parent

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

Changing the font size and weight

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

The Pro exceeded our expectations and did a fantastic…

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

    This prop can be one of the following 2 types:

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

    This prop can be one of the following 5 types:

    • 'primary'
    • 'secondary'
    • 'tertiary'
    • 'caution'
    • 'solid'
    Default
    'primary'
  • size

    Changes the button’s line-height, padding, border-radius, and font-size.

    Type

    This prop can be one of the following 2 types:

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

    This prop can be one of the following 3 types:

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

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

    This prop can be one of the following 4 types:

    • 'primary'
    • 'secondary'
    • 'tertiary'
    • 'inherit'
    Default
    'primary'
  • type

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

    Type

    This prop can be one of the following 2 types:

    • 'button'
    • 'submit'
    Default
    'button'
  • 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