@thumbtack/tp-ui-react-button NPM

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

<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&hellip;{' '}
    <strong>
        <TextButton>Read more</TextButton>
    </strong>
</Body>

@thumbtack/tp-ui-react-ui-action

@everything-registry/sub-chunk-917 @thumbtack/tp-ui-react-modal-default @thumbtack/tp-ui-react-tooltip @zalastax/nolb-_thu

4.1.5

7 years ago

4.1.4

7 years ago

4.1.3

7 years ago