@thumbtack/tp-ui-react-button v4.1.5
package: '@thumbtack/tp-ui-react-button' kit: element/button.yaml platform: react
url: /api/components/element/button/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="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="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="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.
<Button icon={<ContentModifierMessageSmall />}>Send Message</Button>
Button with loading indicator
These loading indicators should be used when buttons are processing. They are avialble in the primary
and secondary
button themes.
<ButtonRow>
<Button isLoading>Send Quote</Button>
<Button theme="secondary" 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.
<React.Fragment>
The Pro exceeded our expectations and did a fantastic… <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.
<strong>
<TextButton iconLeft={<NavigationArrowLeftSmall />}>Back</TextButton>
</strong>
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>
Changing the font size and weight
These buttons inherit the font size and font weight of their container.
<Body size={3}>
The Pro exceeded our expectations and did a fantastic…{' '}
<strong>
<TextButton>Read more</TextButton>
</strong>
</Body>