Components

Floating Action Button

Floating Action Button (FAB) is used for easily accessed actions.

Examples

A plain FAB

<Flex flexDirection="column" alignItems="flex-end">
  <FloatingActionButton 
    icon={<TicketControlFill30Icon />}
    position="static"
    isTextVisible={false}
    marginBottom={2}
  >
    Inspection
  </FloatingActionButton>
  <FloatingActionButton 
    icon={<TicketControlFill30Icon />}
    position="static"
    isTextVisible={true}
  >
    Inspection
  </FloatingActionButton>
</Flex>

A FAB with overridden interaction

() => {
  const [isOpen, setOpen] = React.useState(false);
  return (
    <Flex flexDirection="column" alignItems="flex-end">
      <Box alignSelf="start">
          <Switch 
            size="sm" onChange={() => setOpen(prev => !prev)} 
            isChecked={isOpen}
          />
          <Text>Show text?</Text>
      </Box>
      
      <FloatingActionButton 
        isTextVisible={isOpen}
        icon={<TicketControlFill30Icon />}
        variant="accent"
        position="static"
      >
        In control 💪
      </FloatingActionButton>
    </Flex>
  );
}

Different variants

<Flex flexFlow="column">
  <FloatingActionButton
    position="static"
    variant="accent"
    icon={<CustomerServiceOutline30Icon />}
    marginBottom={2}
  >
    Accent
  </FloatingActionButton>
  <FloatingActionButton
    position="static"
    variant="core"
    icon={<QuestionOutline30Icon />}
    marginBottom={2}
  >
    Core
  </FloatingActionButton>
  <FloatingActionButton
    position="static"
    variant="brand"
    icon={<TicketControlFill30Icon />}
    marginBottom={2}
  >
    Brand
  </FloatingActionButton>
</Flex>

Guidelines

Floating Action Buttons (FABs) are typically placed in the bottom right corner of the screen, displaying an icon and text.

The text automatically appears or disappears based on user scrolling: As you scroll down, the text hides after a second. Scrolling up reveals the text again after another second.

FABs come in three different variants. The variant should match the design and should not change within a flow.

This is a button that should always be above all other content so it’s always available. Exceptions only for drawers and modals that open over. It should only be used for a main action that need to be visible and available across flows, pages or services.

You should ideally use only one FAB on the same service i.e. the main action for the app. For example “Write a message”, “Add something” or “Show ticket”.

Code