FAB and extended FAB

Floating action buttons and extended FABs (COMPONENT_SPEC §5; Compose FloatingActionButton, Medium/LargeFloatingActionButton and Small/Medium/LargeExtendedFloatingActionButton). The grids are plain HTML with m3e-css classes. An icon-only FAB needs an aria-label; an extended FAB is named by its label, also when collapsed.

FAB sizes

Color styles

Primary container is the default. M3 Expressive adds primary, secondary and tertiary (m3.material.io FAB › Specs › Color styles).

Extended FAB

m3e-extended-fab--collapsed shows the icon only, at FAB size. Without JavaScript the label track eases 0fr ↔ 1fr on the fast spatial curve.

React

<Fab> and <ExtendedFab>. Toggle twice quickly: the width spring reverses from its current speed. In the list, the extended FAB collapses as you scroll down and expands when you scroll up (useExtendedFabScroll).

Small FAB (deprecated)

Deprecated (DECISIONS D4): m3.material.io no longer recommends the small FAB. It ships until 2.0 for migration and gets no new features; use the baseline FAB. <Fab size="small"> warns once in development.

Sources

androidx Compose Material3 1.5.0-beta01 (19991f2c): FloatingActionButton.kt, Fab*Tokens.kt, ExtendedFab*Tokens.kt and the FloatingActionButtonDefaults values in components/fab-defaults.css; m3.material.io FAB and Extended FAB pages for the color styles and scroll behavior.