Thumbprint logo

Fab

Buttons providing easy access to important actions

Text Fab

<c>
  <i className="mr2" />
  Filters
</c>

Secondary Text Fab

<c theme="secondary">
  <i className="mr2" />
  Filters
</c>

Icon Fab

<o icon={<i />} />

Secondary Icon Fab

<o
  icon={<i />}
  theme="secondary"
/>

Props

TextFab

  • 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

  • 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