FloatingActionButton

Dark Mode
Accessibility

Floating action buttons (FABs) are buttons that provide quick actions indicated by only an icon.
They primarily appear on a different layer on top of the interface hence the floating.

View Figma

View Implementation

Anatomy

Actions

Type	Support	Description
Synchronous		An action that is executed locally and immediately.
Hyperlink		A hyperlink that navigates to a different route.
Ansynchronous		An action that is triggered immediately, but takes an unknown amount of time to complete.

Intents

Primary

Dark Mode
Open in Playroom

<Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="primary"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="primary"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="primary"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="primary"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box><Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="primary"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="primary"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="primary"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="primary"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box>

Primary Alternate

Dark Mode
Open in Playroom

<Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="primary-alternate"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="primary-alternate"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="primary-alternate"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="primary-alternate"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box><Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="primary-alternate"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="primary-alternate"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="primary-alternate"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="primary-alternate"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box>

Control

Dark Mode
Open in Playroom

<Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="control"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="control"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="control"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="control"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box><Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="control"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="control"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="control"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="control"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box>

Function

Dark Mode
Open in Playroom

<Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="function"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="function"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="function"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="function"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box><Box space={2}>
  <Box space={2} direction="row">
    <FloatingActionButton
      intent="function"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      intent="function"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
  <Box space={2} direction="row">
    <FloatingActionButton
      disabled
      intent="function"
      icon={IconArrowLeft}
      label="Left"
      onClick={() => {
        // noop
      }}
    />
    <FloatingActionButton
      disabled
      intent="function"
      icon={IconArrowRight}
      label="Right"
      onClick={() => {
        // noop
      }}
    />
  </Box>
</Box>

Behaviour

Keyboard Focus

A floating action button can be navigated using a keyboard. The keyboard focus state adds a blue ring around it. It only shows when a user is actually using the keyboard to navigate.

Usage Guidelines

tbd.

Accessibility

Floating action buttons must always provide a

label

for screen reader users.

Keyboard Interaction

Key	Interaction
`Space` `Enter`	Execute the button action. The focus remains on the button except if the button opens or closes the current container. In this case, the focus moves to the target or back to the caller.

Options

Name	Type	Default	Description
onClick*	func
label*	string		A description of what the action does for screen readers
icon*	func
disabled	bool
intent	primary \| primary-alternate \| control \| function	primary
mode	normal \| compact

Changelog

08. May 2023

added hover & active state to buttons
added primary-alternate, control & function as intents
improved colors a bit (e.g. different shade of blue)

11. November 2022

renamed ActionButton to FloatingActionButton
renamed the
```
secondary
```
intent to
```
control
```
to match the action buttons
fixed inconsistent sizing of disabled buttons