Thumbprint logo

Components

Fab

Buttons providing easy access to important actions

Text Fab

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

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

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

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

Props
TextFab
@deprecated Use `TextFabV2` instead.
  • 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
IconFab
@deprecated Use `IconFabV2` instead.
  • 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