Actions
Buttons, icon buttons, FABs, the FAB menu, button groups, split buttons and segmented buttons — every variant, size and state from the M3 Expressive spec. Press things: shapes morph on springs.
Common buttons
Five color styles in five sizes. Round by default; square is new in Expressive. While pressed every button morphs to the pressed corner on the default-effects spring (no bounce).
Color styles Height 40dp · Pad 16dp · Label large · Corner full (20dp) → pressed 8dp
Shape of the size rows
Extra small Height 32dp · Pad 12dp · Icon 20dp · Gap 4dp · Label large · 48dp target · Corner full (16dp) → pressed 8dp
Small (default) Height 40dp · Pad 16dp · Icon 20dp · Gap 8dp · Label large · 48dp target · Corner full (20dp) → pressed 8dp
Medium Height 56dp · Pad 24dp · Icon 24dp · Gap 8dp · Title medium · Corner full (28dp) → pressed 12dp
Large Height 96dp · Pad 48dp · Icon 32dp · Gap 12dp · Headline small · Outline 2dp · Corner full (48dp) → pressed 16dp
Extra large Height 136dp · Pad 64dp · Icon 40dp · Gap 16dp · Headline large · Outline 3dp · Corner full (68dp) → pressed 16dp
Round vs square Square 12 / 12 / 16 / 28 / 28dp · Pressed 8 / 8 / 12 / 16 / 16dp (both shapes)
With icons One icon per button · leading or trailing · padding unchanged with an icon
Toggle buttons Selected: round → square, square → round · fast-spatial spring · icon fills · no text toggle
Toggle sizes Selected corner 12 / 12 / 16 / 28 / 28dp (round) · full (square)
Extra large toggle Height 136dp · Selected corner 28dp
Disabled Container on-surface 10% · Content on-surface 38% · Elevation 0
Filled
enabled
hovered
focused
pressed
disabled
Tonal
enabled
hovered
focused
pressed
disabled
Outlined
enabled
hovered
focused
pressed
disabled
Elevated
enabled
hovered
focused
pressed
disabled
Text
enabled
hovered
focused
pressed
disabled
Hover, focus and pressed are simulated here; hover, Tab to and press the live buttons above to see them for real.
States State layer in the content color: hover 8% · focus 10% + 3dp secondary ring at 2dp · pressed 10% + pressed corner · disabled none
Icon buttons
Four color styles, five sizes, three widths and two shapes. Toggle icon buttons switch to a filled icon when selected.
Shape of the size rows
Extra small Height 32dp · Icon 20dp · Width 28 / 32 / 40dp · 48dp target · Corner full (16dp) → pressed 8dp
Small (default) Height 40dp · Icon 24dp · Width 32 / 40 / 52dp · 48dp target · Corner full (20dp) → pressed 8dp
Medium Height 56dp · Icon 24dp · Width 48 / 56 / 72dp · Corner full (28dp) → pressed 12dp
Large Height 96dp · Icon 32dp · Width 64 / 96 / 128dp · Outline 2dp · Corner full (48dp) → pressed 16dp
Extra large Height 136dp · Icon 40dp · Width 104 / 136 / 184dp · Outline 3dp · Corner full (68dp) → pressed 16dp
Round vs square Round full · Square 12dp (S) · Pressed 8dp (S)
Toggle icon buttons Selected: filled → primary · tonal → secondary · outlined → inverse-surface · standard icon → primary
Disabled Icon on-surface 38% · Container on-surface 10%
Filled
enabled
hovered
focused
pressed
disabled
Tonal
enabled
hovered
focused
pressed
disabled
Outlined
enabled
hovered
focused
pressed
disabled
Standard
enabled
hovered
focused
pressed
disabled
States State layer in the icon color: hover 8% · focus 10% + 3dp secondary ring at 2dp · pressed 10% (8dp corner) · disabled none
Floating action buttons
Three sizes and six color styles. The *-container styles replace the old primary/secondary/tertiary sets; solid primary/secondary/tertiary are new high-emphasis sets.
FAB 56 × 56dp · Corner 16dp · Icon 24dp · Elevation 3 → hover 4
Medium FAB 80 × 80dp · Corner 20dp · Icon 28dp · Elevation 3 → hover 4
Large FAB 96 × 96dp · Corner 28dp · Icon 36dp · Elevation 3 → hover 4
Baseline (not recommended) Small FAB 40dp · Corner 12dp · Surface: surface-container-high / primary
Primary container
enabled
hovered
focused
pressed
Tertiary
enabled
hovered
focused
pressed
States Elevation 3 at rest, focus and press · hover 4 · state layer in the icon color 8 / 10 / 10%
Small extended FAB Height 56dp · Pad 16dp · Icon 24dp · Gap 8dp · Title medium · Corner 16dp
Medium extended FAB Height 80dp · Pad 26dp · Icon 28dp · Gap 12dp · Title large · Corner 20dp
Large extended FAB Height 96dp · Pad 28dp · Icon 36dp · Gap 16dp · Headline small · Corner 28dp
Extended FAB collapse Collapses to a square FAB · width default-spatial + fade fast-effects; expands on fast-spatial
FAB menu
The FAB morphs into a 56dp round close button anchored at its top-trailing corner; items reveal bottom-up from the trailing edge. Esc or a click outside closes it.
Color set
FAB size
Last action: —
Color sets and FAB sizes FAB 56dp, corner 16dp, icon 24dp → close 56dp full, icon 20dp · primary-container → primary · Items 56dp, pad 24dp, gap 4dp, 8dp above close, title medium · Fast-spatial morph, slow-effects stagger
Last action: —
With scrim Scrim at 32% · 6 items maximum · 80dp FAB
Button groups
Standard groups keep a gap and squeeze: the pressed button grows 15% and its neighbours give the space up (fast-spatial). Connected groups replace segmented buttons: 2dp apart, only the pressed or selected button changes shape.
Standard · Extra small Height 32dp · Gap 18dp · Pressed +15% width
Standard · Small Height 40dp · Gap 12dp · Pressed +15% width
Standard · Medium Height 56dp · Gap 8dp · Pressed +15% width
Standard · Large Height 96dp · Gap 8dp · Pressed +15% width
Standard · Extra large Height 136dp · Gap 8dp · Pressed +15% width
Standard · single select Selected toggle: color + round ↔ square · press squeeze on the pressed item
Standard · icon buttons, multi select Icon toggles fill when selected
Connected · Extra small · single select Height 32dp · Gap 2dp · Inner 8dp → pressed 4dp · Selected full · Min width 48dp
Connected · Small · single select Height 40dp · Gap 2dp · Inner 8dp → pressed 4dp · Selected full · Min width 48dp
Connected · Medium · single select Height 56dp · Gap 2dp · Inner 8dp → pressed 4dp · Selected full
Connected · Large · single select Height 96dp · Gap 2dp · Inner 16dp → pressed 12dp · Selected full
Connected · Extra large · single select Height 136dp · Gap 2dp · Inner 20dp → pressed 16dp · Selected full
Connected · multi select, outlined Each selected item is fully round · neighbours unaffected
Connected · square Outer corners 4 / 8 / 8 / 16 / 20dp (XS–XL) · selected full
Split buttons
A leading action and a trailing menu button, 2dp apart. Inner corners morph on hover, focus and press; the trailing button turns fully round while the menu is open and its chevron rotates 180°.
Color styles Height 40dp · Gap 2dp · Inner 4dp → 12dp · Leading pad 16/12dp · Trailing 48dp, icon 22dp
Extra small Height 32dp · Gap 2dp · Inner 4dp → 8dp · Leading pad 12/10dp · Trailing 48dp, icon 22dp
Small Height 40dp · Gap 2dp · Inner 4dp → 12dp · Leading pad 16/12dp · Trailing 48dp, icon 22dp
Medium Height 56dp · Gap 2dp · Inner 4dp → 12dp · Leading pad 24/24dp · Trailing 56dp, icon 26dp
Large Height 96dp · Gap 2dp · Inner 8dp → 20dp · Leading pad 48/48dp · Trailing 96dp, icon 38dp
Extra large Height 136dp · Gap 2dp · Inner 12dp → 20dp · Leading pad 64/64dp · Trailing 136dp, icon 50dp
Segmented buttons (legacy)
Baseline M3 component, no longer recommended in Expressive — use a connected button group instead. Kept for completeness.
Single select Height 40dp · Outline 1dp · Pad 12dp · Label large · Selected secondary-container + 18dp check
Multi select with icons Icon replaced by the checkmark when selected
Disabled Label on-surface 38% · Outline on-surface 12%