Components

Button(React)

Clickable elements used to perform actions.

Version:	`14.16.0` •View source•Changelog•Report 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.

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

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

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

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

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

Full width buttons

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

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

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

<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 iconRight={<ContentModifierMessageSmall />}>Send Message</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.

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

<ButtonRow>
    <Button isLoading>Send Quote</Button>
    <Button theme="secondary" isLoading>
        Send Quote
    </Button>
    <Button theme="tertiary" isLoading>
        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…

<React.Fragment>
    The Pro exceeded our expectations and did a fantastic&hellip; <TextButton>Read more</TextButton>
</React.Fragment>

<React.Fragment>
    The Pro exceeded our expectations and did a fantastic&hellip; <TextButton>Read more</TextButton>
</React.Fragment>

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>

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

<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: tokens.tpColorWhite }}>
    <TextButton theme="inherit" iconLeft={<NavigationCloseMedium />} accessibilityLabel="Close" />
</div>

<div style={{ color: tokens.tpColorWhite }}>
    <TextButton theme="inherit" iconLeft={<NavigationCloseMedium />} accessibilityLabel="Close" />
</div>

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…

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

<Text size={3}>
    The Pro exceeded our expectations and did a fantastic&hellip;{' '}
    <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
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
() => void
onMouseEnter
Function that runs when the user hovers on the button.
Type
() => void
onMouseOver
Function that runs when the user hovers on the button. Unlike onMouseEnter, onMouseOver fires each time a child element receives focus.
Type
() => void
onFocus
Function that runs when the button receives focus.
Type
() => void
onMouseLeave
Function that runs when the user hovers away from the button.
Type
() => void
onBlur
Function that runs when the button loses focus.
Type
() => 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
() => void
onMouseEnter
Function that runs when the user hovers on the button.
Type
() => void
onMouseOver
Function that runs when the user hovers on the button. Unlike onMouseEnter, onMouseOver fires each time a child element receives focus.
Type
() => void
onFocus
Function that runs when the button receives focus.
Type
() => void
onMouseLeave
Function that runs when the user hovers away from the button.
Type
() => void
onBlur
Function that runs when the button loses focus.
Type
() => 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