Components

Fab

Buttons providing easy access to important actions

Text Fab

A text fab pairs a leading icon with a label. It renders the small preferences icon by default, matching its most common use as a persistent filter action.

<TextFabV2>
  Filters
</TextFabV2>

Secondary Text Fab

<TextFabV2 theme="secondary">
  Filters
</TextFabV2>

With filters applied

When count is greater than zero, a numeric badge showing the number of applied filters replaces the leading icon. This maps to the Figma component's hasFiltersApplied and count properties, collapsed into a single count prop. In the secondary theme the background also switches to the default surface color.

<TextFabV2 count={2}>
  Filters
</TextFabV2>

<TextFabV2
  count={2}
  theme="secondary"
>
  Filters
</TextFabV2>

Icon Fab

An icon fab renders a single medium icon. Because it has no visible text, accessibilityLabel is required.

<IconFabV2
  accessibilityLabel="Add"
  icon={<ContentActionsAddMedium />}
/>

Secondary Icon Fab

<IconFabV2
  accessibilityLabel="Add"
  icon={<ContentActionsAddMedium />}
  theme="secondary"
/>

Positioning

Fabs float above the page content but do not position themselves — wrap the fab in a positioned container so the placement stays under the consumer's control. The demo below pins the fab to the bottom-right of a position: relative frame that stands in for the viewport.

<div className="relative ba b-dashed b-gray-300 br3 h6">
  <div className="absolute bottom2 right2">
    <TextFabV2>
      Filters
    </TextFabV2>
  </div>
</div>

On a real surface the wrapper is fixed to the viewport instead (offset any fixed chrome, such as a bottom nav bar, with a larger bottom value):

<div className="fixed bottom2 right2">
    <TextFabV2 onClick={openFilters}>Filters</TextFabV2>
</div>

Props

TextFabV2

children
required
Label text for the fab.

Type
React.ReactNode
theme
Theme that decides the style of the button.

Type
'primary' | 'secondary'
Default
'primary'
count
Number of applied filters. When greater than zero, a numeric badge replaces the leading icon.

Type
number
icon
Leading icon rendered before the label. Must be one of the small icons from Thumbprint Icons. Defaults to the small preferences icon.

Type
React.ReactNode
onClick
Function that runs when the fab is activated by mouse, touch, or keyboard. Pointer activation receives a real DOM MouseEvent, so event.preventDefault() / event.stopPropagation() work; keyboard activation receives a synthetic event (the fab has no default action to cancel).

Type
(event: React.MouseEvent<HTMLElement>) => void
accessibilityLabel
Description of the fab content for assistive technologies. Only needed if the label text is not descriptive enough.

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

Type
string

IconFabV2

icon
required
Icon from Thumbprint Icons to render within the button. It must be one of the medium icons.

Type
React.ReactNode
accessibilityLabel
required
Description of the fab content for assistive technologies. Required because the button contains only an icon and no descriptive text.

Type
string
theme
Theme that decides the style of the button.

Type
'primary' | 'secondary'
Default
'primary'
onClick
Function that runs when the fab is activated by mouse, touch, or keyboard. Pointer activation receives a real DOM MouseEvent, so event.preventDefault() / event.stopPropagation() work; keyboard activation receives a synthetic event (the fab has no default action to cancel).

Type
(event: React.MouseEvent<HTMLElement>) => void
dataTestId
A selector hook into the React component for use in automated testing environments.

Type
string