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">
      <FormControl as={Flex} gap={3} alignItems="center" mb={3}>
          <Switch 
            size="sm" onChange={() => setOpen(prev => !prev)} 
            isChecked={isOpen}
          />
          <FormLabel>Show text?</FormLabel>
      </FormControl>
      
      <FloatingActionButton 
        isTextVisible={isOpen}
        icon={<TicketControlFill30Icon />}
        variant="accent"
        position="static"
      >
        In control 💪
      </FloatingActionButton>
    </Flex>
  );
}

Different variants

<>
  <FloatingActionButton
    position="static"
    variant="accent"
    icon={<CustomerServiceOutline30Icon />}
    marginBottom={2}
  >
    Accent
  </FloatingActionButton>
  <FloatingActionButton
    position="static"
    variant="base"
    icon={<QuestionOutline30Icon />}
    marginBottom={2}
  >
    Base
  </FloatingActionButton>
  <FloatingActionButton
    position="static"
    variant="brand"
    icon={<TicketControlFill30Icon />}
    marginBottom={2}
  >
    Brand
  </FloatingActionButton>
</>