Fab

Buttons providing easy access to important actions

Text Fab

<TextFab>
  <ContentActionsFilterSmall className="mr2" />
  Filters
</TextFab>

<TextFab theme="secondary">
  <ContentActionsFilterSmall className="mr2" />
  Filters
</TextFab>

<IconFab icon={<ContentActionsAddMedium />} />

<IconFab
  icon={<ContentActionsAddMedium />}
  theme="secondary"
/>

children
required
Children content to render.

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

Type
'primary' | 'secondary'
Default
'primary'
onClick
Function that will run when the fab is clicked on.

Type
() => void
accessibilityLabel
Description of the fab content. It is required if the link contains an icon and no descriptive text.

Type
string

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

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

Type
'primary' | 'secondary'
Default
'primary'
onClick
Function that will run when the fab is clicked on.

Type
() => void
accessibilityLabel
Description of the fab content. It is required if the link contains an icon and no descriptive text.

Type
string