Thumbprint logo

Components

Button

Clickable elements used to perform actions

Button themes

These are the available ButtonV2 styles for use on light background colors. alert is a high-emphasis, filled treatment reserved for destructive actions such as deleting.

<ButtonRow>
  <ButtonV2>
    Primary
  </ButtonV2>
  <ButtonV2 theme="secondary">
    Secondary
  </ButtonV2>
  <ButtonV2 theme="tertiary">
    Tertiary
  </ButtonV2>
  <ButtonV2 theme="alert">
    Alert
  </ButtonV2>
  <ButtonV2 theme="caution">
    Caution
  </ButtonV2>
</ButtonRow>

Sizes
Buttons come in two sizes: small (40px) and large (52px), which adjust the height, horizontal padding, and font size. large is the default. Each height matches the TextInputV2 size of the same name, so the two line up when placed side by side.
<ButtonRow>
  <ButtonV2 size="small">
    Small
  </ButtonV2>
  <ButtonV2 size="large">
    Large
  </ButtonV2>
</ButtonRow>

Disabled buttons
The isDisabled prop visually and functionally disables the button.
<ButtonRow>
  <ButtonV2
    isDisabled
    theme="primary"
  >
    Disabled
  </ButtonV2>
</ButtonRow>

Full width buttons
<ButtonV2 width="full">
  Send Quote
</ButtonV2>

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.
<ButtonV2 width="full-below-small">
  Send Quote
</ButtonV2>

Icon within a button
The icon prop accepts any small icon from Thumbprint Icons. This prop renders an icon left within the button.
<ButtonV2 icon={<ContentModifierMessageSmall />}>
  Send Message
</ButtonV2>

Icon right within the button
iconRight renders an icon right within the button.
<ButtonV2 iconRight={<ContentModifierMessageSmall />}>
  Send Message
</ButtonV2>

Button with loading indicator
The isLoading prop should be used when a button is processing. The label is replaced with a loading animation.
<ButtonRow>
  <ButtonV2 isLoading>
    Send Quote
  </ButtonV2>
  <ButtonV2
    isLoading
    theme="secondary"
  >
    Send Quote
  </ButtonV2>
  <ButtonV2
    isLoading
    theme="tertiary"
  >
    Send Quote
  </ButtonV2>
  <ButtonV2
    isLoading
    theme="alert"
  >
    Send Quote
  </ButtonV2>
  <ButtonV2
    isLoading
    theme="caution"
  >
    Send Quote
  </ButtonV2>
</ButtonRow>

Buttons that look like links
The TextButtonV2 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…{' '}
  <TextButtonV2>
    Read more
  </TextButtonV2>
</>

Adding an icon with text
The TextButtonV2 component provides an iconLeft prop to help vertically position icons alongside text.
<TextButtonV2 iconLeft={<NavigationArrowLeftSmall />}>
  Back
</TextButtonV2>

Adding an icon with text on the right
The TextButtonV2 component also allows an icon to the right of the text.
<TextButtonV2 iconRight={<NavigationArrowRightSmall />}>
  Forward
</TextButtonV2>

Icon that inherits color of parent
This icon inherits the color of its parent with theme="inherit".
<div className="white">
  <TextButtonV2
    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…{' '}
  <TextButtonV2>
    Read more
  </TextButtonV2>
</Text>

Props
ButtonV2
  • children
    Contents displayed within the button.
    

    Type
    React.ReactNode
  • theme
    Controls the button's background, text, and border color. Maps to v2 semantic color
tokens.
    

    Type
    'primary' | 'secondary' | 'tertiary' | 'alert' | 'caution'
    Default
    'primary'
  • size
    Changes the button's height, padding, and font size: small is 40px tall and large 52px.
Each matches the TextInputV2 size of the same name, so the two line up when paired.
    

    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 the small breakpoint.
    

    Ignored within an InputRow, where the button always fills its cell so the row's
widthRatios govern the layout.
    

    Type
    'auto' | 'full' | 'full-below-small'
    Default
    'auto'
  • icon
    Icon from Thumbprint Icons to render left within the button.
    

    Type
    React.ReactNode
  • iconRight
    Icon from Thumbprint Icons to render right 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 label is
replaced with a loading animation and interaction is suppressed.
    

    Type
    boolean
    Default
    false
  • accessibilityLabel
    Description of the button's content. It is required if the button has an icon and no
descriptive text. Rendered as aria-label.
    

    Type
    string
  • type
    Buttons of type submit will submit a form when used within a form element.
    

    Type
    'button' | 'submit'
    Default
    'button'
  • onClick
    Function that runs when the button is activated by mouse, touch, or keyboard. On pointer
activation — and on keyboard activation of a type="submit" button — it receives a real DOM
MouseEvent, so event.preventDefault() / event.stopPropagation() work (e.g. to stop a
type="submit" button from submitting its form, including keyboard-triggered submits). On
keyboard activation of the default type="button" the event is synthetic, but a plain button
has no default action to cancel. Not called while the button is disabled or loading.
    

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

    Type
    (event: React.MouseEvent<HTMLElement>) => void
  • onMouseOver
    Function that runs when the user hovers on the button. Unlike onMouseEnter, onMouseOver
also fires as the pointer moves over descendant elements.
    

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

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

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

    Type
    (e: React.FocusEvent<HTMLElement>) => void
  • form
    Identifies the form that the button is associated with.
    

    Type
    string
  • dataTestId
    A selector hook into the React component for use in automated testing environments.
    

    Type
    string
  • ref
    A ref forwarded to the underlying <button> element.
    

    Type
    React.Ref<HTMLButtonElement>
TextButtonV2
  • children
    Contents displayed within the button.
    

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

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

    Type
    React.ReactNode
  • theme
    Sets the text color. Maps to v2 semantic link color tokens.
inherit will make the button inherit color from its parent.
    

    Type
    'primary' | 'secondary' | 'tertiary' | 'inherit' | 'caution'
    Default
    'primary'
  • 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
TextButtonV2 if it is not interactive.
    

    Type
    boolean
    Default
    false
  • type
    Buttons of type submit will submit a form when used within a form element.
    

    Type
    'button' | 'submit'
    Default
    'button'
  • onClick
    Function that runs when the button is activated by mouse, touch, or keyboard. On pointer
activation — and on keyboard activation of a type="submit" button — it receives a real DOM
MouseEvent, so event.preventDefault() / event.stopPropagation() work (including
canceling keyboard-triggered submits). On keyboard activation of the default type="button"
the event is synthetic, but a plain button has no default action to cancel. Not called while
the button is disabled.
    

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

    Type
    (event: React.MouseEvent<HTMLElement>) => void
  • onMouseOver
    Function that runs when the user hovers on the button. Unlike onMouseEnter, onMouseOver
also fires as the pointer moves over descendant elements.
    

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

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

    Type
    (e: React.FocusEvent<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. Rendered as aria-label.
    

    Type
    string
  • form
    Identifies the form that the button is associated with.
    

    Type
    string
  • width
    TextButtonV2 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 the 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
  • ref
    A ref forwarded to the underlying <button> element.
    

    Type
    React.Ref<HTMLButtonElement>