Skip to content
M3 Expressive

Communication

Badges, progress and loading indicators, snackbars and tooltips — the M3 Expressive feedback components, with the wavy progress shape, the 4dp track gap and stop indicator, and the 7-shape loading morph.

Badges

Small badges flag unread state; large badges carry a count up to 999+. Both use error / on-error and anchor to the icon's top-trailing corner exactly like Compose BadgedBox: x = icon width − offset, y = −badge height + offset. Screen readers hear a summary (“3 new”, “More than 999 new”) instead of the visual label.

New New New
Small badge 6 × 6dp · full · error · offset 6 × 6dp: inside the icon's top-trailing corner
1 new 99 new More than 99 new More than 999 new
Large badge 16dp high · min 16dp · 4dp padding · label-small · offset 12 × 14dp: 2dp above, 12dp over the icon
New 3 new 42 new New More than 999 new Inbox 12 new
Standalone dot 6dp · large 16dp · 999+ = 34dp wide
3 new
Mail
More than 99 new
Chat
New
Spaces
Meet
On navigation items indicator 56 × 32dp · icon 24dp · badge anchored to the icon

Linear progress

Active indicator in primary, track in secondary-container (the token value; the MDC Android docs still say primary-container), a 4dp gap between them and a 4dp stop dot at the track end that disappears at 100%. Flat progress moves on a spring (ζ 1 / k 50, about 1.3s). Wavy progress tweens 500ms linear; its wave flattens at ≤ 10% and ≥ 95% with 500ms amplitude ramps. Indicators mirror in RTL.

40%
Value
Determinate 4dp · gap 4dp · stop 4dp · round caps · spring ζ 1 / k 50
Indeterminate 1750ms · 2 lines: heads at 0 / 650ms, tails at 250 / 900ms · emphasized-accelerate
Thick 8dp · stop 4dp with 2dp trailing space
Wavy determinate 10dp high · amplitude 3dp · wavelength 40dp · 1 λ/s · 500ms linear
Wavy indeterminate wavelength 20dp · amplitude 3dp
Wavy thick 14dp high · 8dp stroke · amplitude 3dp

Circular progress

40dp flat and 48dp wavy by default (44 / 52dp thick). The indeterminate indicator now shows its track; its arc grows from 10% to 87% and back (3s each way, standard easing) while it spins 1080° per 6s plus a 90° emphasized-decelerate step every 1.5s.

40%
Value
Determinate 40dp · 4dp stroke · gap 4dp · thick 44dp / 8dp
Indeterminate 6000ms · 1080° + 90° steps (300ms) · arc 0.1 ↔ 0.87
Wavy 48dp · amplitude 1.6dp · wavelength 15dp · waves = max(5, round(2πr / λ))
Sizes 24 · 40 · 64 · 96dp

Loading indicator

For waits between 200ms and 5s: show nothing below 200ms and a progress indicator past 5s. Seven shapes morph every 650ms on a ζ 0.6 / k 200 spring that overshoots about 9.5%, each adding a quarter turn on top of a 360° / 4666ms linear spin. With reduced motion the morph stops and only the slow spin remains.

Default 48dp container · 38dp indicator · primary · scales 24–240dp
Contained primary-container circle · on-primary-container shape
60%
Determinate circle (18°) → soft burst · rotation −180° × progress
In a button Spinner · the button's icon size (20dp) · currentColor
  1. 1. Soft burst
  2. 2. 9-sided cookie
  3. 3. Pentagon
  4. 4. Pill
  5. 5. Sunny
  6. 6. 4-sided cookie
  7. 7. Oval
Shape sequence softBurst → cookie9Sided → pentagon → pill → sunny → cookie4Sided → oval → (loop)

Snackbar

Brief messages at the bottom of the screen, above the navigation bar on phones. One at a time: the next waits until the current one has faded out. Enter and exit scale 0.8 ↔ 1 on the fast spatial spring with a fast effects fade. Swipe sideways to dismiss; hovering or focusing pauses the timer.

Single line 48dp · 4dp corner · inverse-surface · body-medium · level 3 · 4s
With action inverse-primary label-large text button, 40dp · 10s
Two lines 68dp · text wraps · max width 600dp
Closable close icon 24dp, inverse-on-surface, in a 40dp button
Duration short 4000ms · long 10000ms · indefinite
Queue & long action one at a time · long action on its own line (84dp)

Tooltips

Plain tooltips label icons. Rich tooltips add a subhead and actions and stay open while you hover them; the persistent kind opens on click and takes focus so its actions are reachable by keyboard. Hover opens with no delay (as in Compose BasicTooltipBox), keyboard focus opens too, Escape closes, and the trigger gets aria-describedby. Show and hide scale 0.8 ↔ 1 on the fast spatial spring with a fast effects fade.

Plain 24dp min · 4dp corner · inverse-surface · body-small · 8 × 4dp padding · 4dp gap · max 200dp
Persistent: click the info button
Rich ≤ 320dp · 12dp corner · surface-container · level 2 · padding 12 / 16 / 8dp · title-small + body-medium · text-button actions

Skeleton

Placeholders in on-surface at 10%, so they show on any surface, filled cards included, with the M3 corner scale and a slow, synchronized pulse. Content fades in quickly once loaded.

Left: on surface. Right: on surface-container-highest (a filled card).

Loading placeholder on-surface 10% · 8dp corner default · avatar full · media 12dp · lines 4dp · 2s pulse