Site settings
Change the appearance of the site to suit your preferences
Floating Action Button
Floating Action Button (FAB) is used for easily accessed actions.
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>