Components

Fab(React)

Buttons providing easy access to important actions.

Version:	`14.18.2` •View source•Changelog•Report issue
Install:	`yarn add @thumbtack/thumbprint-react`
Import:	`import { TextFab, IconFab } from '@thumbtack/thumbprint-react';`

Text Fab

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

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

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

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

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

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

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

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

children
required
Children content to render.
Type
React.ReactNode
theme
Theme that decides the style of the button.
Type
This prop can be one of the following 2 types:
'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
This prop can be one of the following 2 types:
'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