Fab
Floating action button anchored to a screen corner, with an optional speed-dial of secondary actions
Category: inputs · WCAG 2.2-AA · inputs, fab, floating-action-button, mobile, speed-dial
States
- default
- open
- closed
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | React.ReactNode | — | The main icon |
ariaLabel | string | — | Alias of `label` — the same invisible accessible name under the catalog spelling. Neither is deprecated. |
label | string | — | Accessible name for the main button (it is icon-only). Not rendered — screen readers only. Exactly one of `label` / `ariaLabel` is required; the type enforces it. |
onClick | () => void | — | Called when the element is clicked. |
actions | FabAction[] | — | Speed-dial actions; each has a label, icon, onSelect, and optional disabled |
position | 'bottom-end' | 'bottom-start' | bottom-end | Screen corner the button is pinned to: `bottom-end` or `bottom-start`. Safe-area insets are honoured either way. |
open | boolean | — | Whether the component is open (controlled). |
defaultOpen | boolean | — | Whether the component is open on first render (uncontrolled). |
onOpenChange | (open: boolean) => void | — | Called with the next open state when it changes. |
className | string | — | Additional CSS class names merged onto the root element. |
Design tokens
--cascivo-color-accent-text--cascivo-color-accent--cascivo-color-accent-content--cascivo-color-accent-hover--cascivo-color-surface--cascivo-color-border--cascivo-radius-full--cascivo-shadow-overlay--cascivo-target-min-coarse--cascivo-motion-enter--cascivo-motion-exit--cascivo-z-dropdown
When to use
- A single, high-emphasis primary action that floats above scrolling content (e.g. Compose, Add)
- A small cluster of related create actions revealed from one corner via a speed-dial
- Touch-first screens where the primary action should stay reachable at the thumb
When not to use
- Ordinary form or toolbar buttons — use Button or IconButton in the layout flow
- More than a handful of actions — use a Menu, Drawer, or full navigation
- Primary navigation between top-level destinations — use Dock
How to build an accessible Fab in React →
Examples
Single action
<Fab label="Compose" onClick={compose}><PlusIcon /></Fab>Speed dial
The main button toggles a menu of secondary actions.
<Fab
label="Create"
actions={[
{ label: 'New note', icon: <NoteIcon />, onSelect: newNote },
{ label: 'New folder', icon: <FolderIcon />, onSelect: newFolder },
]}
>
<PlusIcon />
</Fab>Start corner
<Fab label="Help" position="bottom-start" onClick={openHelp}><HelpIcon /></Fab>Related components
- IconButton — Use IconButton for an in-flow icon control; Fab floats and is high-emphasis
- Dock — Use Dock for bottom navigation between destinations rather than a single action