Fab

MD3 Expressive floating action button for a screen's primary action: four sizes, three color sets (tonal or high-emphasis), and an Extended FAB with a label that can morph between icon-only and icon + label.

Sizes

small 40dp (no longer recommended — it keeps a 48dp touch target), regular 56dp (default), medium 80dp (the size MD3 recommends most) and large 96dp.

<Fab size="medium" icon={<EditIcon />} aria-label="Compose" onClick={compose} />

Colors

color picks the primary / secondary / tertiary set. By default the FAB uses the tonal *-container roles; tonal={false} uses the high-emphasis base roles (e.g. primary / on-primary).

<Fab color="tertiary" tonal={false} icon={<EditIcon />} aria-label="Compose" />

Extended

A label turns the FAB into an Extended FAB, sized per the Expressive spec: regular → 56dp, medium → 80dp, large → 96dp. Pass icon={null} for a label-only FAB.

<Fab size="medium" icon={<EditIcon />} label="Compose" />

Expand and collapse

With expanded, the Extended FAB morphs between icon + label (true) and the plain icon-only FAB (false) on the Expressive spring — typically collapsed while the content scrolls.

<Fab icon={<AddIcon />} label="New item" expanded={!scrolled} />

Elevation

disableElevation removes the shadow — e.g. for a FAB inside a navigation rail or drawer. MD3 advises against disabling a FAB: hide it when its action is unavailable (the native disabled attribute is still honored).

Accessibility

• A native <button>: Tab focuses it, Enter / Space activate it.
• The icon is decorative. An icon-only FAB needs an aria-label describing the action; an Extended FAB is named by its visible label (keep the label visible text and the name the same word).
• A collapsed Extended FAB (expanded={false}) keeps the label as its accessible name.

Props

Prop	Type	Default	Description
color	enum	primary	Color set for the container/content roles.
disableElevation	boolean	false	Removes the container shadow. Per the MD3 spec a FAB inside a Navigation rail (or drawer) has no elevation.
expanded	boolean	—	For an Extended FAB (with `label`): `true` shows the label, `false` collapses it to the plain icon-only FAB. Toggling runs the MD3 Expressive spring morph (Compose `ExtendedFloatingActionButton(expanded=)`). Omit for a static Extended FAB. Ignored without `label`, and ignored while `followContainer` drives the morph.
followContainer	boolean	false	Follows the `--_t` morph value inherited from a morphing container (e.g. a `NavigationRail` header) instead of running the FAB's own spring, staying exactly in sync with the container's spring. While `true`, `expanded` is ignored. Requires `label`.
icon *	ReactNode	—	The icon displayed in the FAB. An Extended FAB (with `label`) may pass `null` for a label-only FAB.
label	string	—	Optional label — turns the FAB into an Extended FAB, sized per the MD3 Expressive extended FAB: `regular` → small extended (56dp, title-medium), `medium` → medium extended (80dp, title-large), `large` → large extended (96dp, headline-small). There is no 40dp extended FAB — `size="small"` with a label renders the 56dp small extended FAB.
size	enum	regular	Container size: small 40dp (no longer recommended by MD3 — prefer a larger size; it keeps a 48dp touch target), regular 56dp, medium 80dp (the size MD3 recommends most), large 96dp.
tonal	boolean	true	`true` (the default) renders the tonal palette — the `*-container` / `on-*-container` roles (e.g. `primary-container`). `false` renders the high-emphasis accent palette — the base color roles (e.g. `primary` with `on-primary` content).