FAB

The floating action for a screen's one primary verb.

v1.0.0·Updated Jul 9, 2026 · 12:00

Live Demo — Fully Interactive

One warm circle for a screen's primary verb — two sizes

Configuration

Variant

Size

<FAB icon={<Plus />} />

Behavior — The Engineering Contract

Prop	Type	Notes
icon	ReactNode	The single primary glyph
label	string	Turns it into the extended pill
size	regular · sm	56 / 44px circle
SpeedDial	Action[]	Fans out mini secondary actions
aria-label	string	Required — the icon needs a name

One FAB per screen, for its single most important verb. For inline or multiple actions use a Button; for a menu of actions use a Menu.

Anatomy

1GlyphOne verb, dark on the warm circle.

2ShadowA soft warm lift, floating above content.

Do's and Don'ts

✓ Do

One warm FAB for the screen's single most important action.

✕ Don't

Don't float two FABs. One primary verb per screen.

✓ Do

Use the extended pill on empty states, where a label helps.

✕ Don't

Don't make it grey. The FAB is the one warm light.

In context: Examples

A · Bottom-right

Pinned bottom-right, clear of the content.

B · Empty state

The extended FAB anchoring a zero-data screen.

C · Speed dial

Fanning out a few related creation actions.

Measurements & Tokens

Code

<button class="o-fab" aria-label="New project"><PlusIcon /></button>

<button class="o-fab o-fab--extended"><PlusIcon /> New project</button>

Related Components