Floating Action Button
A Floating Action Button (FAB) performs the primary, or most common, action on a screen.
A floating action button appears in front of all screen content, typically as a circular shape with an icon in its center.
Only use a FAB if it is the most suitable way to present a screen’s primary action. Only one component is recommended per screen to represent the most common action.
Basic Fab
Preview
Usage
import { Fab } from 'archi-ui'
import { Plus } from 'lucide-react'<Fab>
<Plus />
</Fab>Disabled
Preview
Variants
FABs come in two types: circular, and extended.
Preview
Color
Use color prop to apply different colors to component.
Preview
Size
By default, the size is lg. Use the size prop for smaller floating action button.
Preview
FAB API
API reference docs for the React FAB component.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The content of the component. |
| className | string | - | Override or extend the styles applied to the component |
| variant | 'circular' | 'extended' | 'circular' | The variant to use. |
| size | 'sm' | 'md' | 'lg' | 'lg' | The size of the component. |
| disabled | 'bool' | 'false' | If true, the component is disabled. |
| color | 'default' | 'primary' | 'secondary' | 'info' | 'warning' | 'success' | 'error' | 'default' | The color of the component. |
| href | string | - | The URL to link to when the fab is cliked. If defined, an a element will be used as the root node. |
| component | elementType | - | The component used for the root node. Either a string to use a HTML element or a component. |
Last updated on