How to build an accessible Fab in React

The main button is icon-only and requires a `label` that becomes its aria-label. With a speed-dial it exposes aria-haspopup="menu", aria-expanded, and aria-controls; the dial is a role="menu" of role="menuitem" buttons under vertical roving focus (Arrow keys, Home/End, wrapping). Opening moves focus to the first action and closing (Escape, outside press, or selection via DismissableLayer) returns focus to the button.

When to use a Fab

• 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 it

• 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

Keyboard interactions

Role button, verified at WCAG 2.2-AA.

• Enter
• Space
• ArrowUp
• ArrowDown
• Home
• End
• Escape

Common mistakes

Avoid: <Fab label="Save"><SaveIcon /></Fab> next to a form submit button

Prefer: <Button type="submit">Save</Button>

A floating button competes with the in-flow submit and hides the action off the form

Example

<Fab label="Compose" onClick={compose}><PlusIcon /></Fab>

See the full Fab reference →