mtrlShape
Material 3's corner scale as mtrl ships it, the components that use each step, and the expressive shapes.
mtrl values read from its compiled CSS · mtrl 0.10.6 · M3 values from m3.material.io and Compose
The corner scale
Each step is --mtrl-sys-shape-corner-<step>. Select a step to see its components below; click a value to change it for your theme.
- None
- Extra small
- Small
- Medium
- Large
- Large increased
- Extra large
- Extra large increased
- Extra extra large
- Full
mtrl-specific, not part of M3
- Extra tiny
- Tiny
- Pill
Shape in components
Real mtrl components under the step they read. Hover a row to find its step above. A round button isn't here: M3's round shape is half the button's height, not a step.
Expressive shapes
M3 defines 35 shapes; mtrl ships these 35 today (FLO-346), drawn here by mtrl/core/shapes, the geometry its loading indicator morphs through.
- Circle
- Square
- Slanted
- Arch
- Fan
- Arrow
- Semicircle
- Oval
- Pill
- Triangle
- Diamond
- Clam shell
- Pentagon
- Gem
- Sunny
- Very sunny
- 4-sided cookie
- 6-sided cookie
- 7-sided cookie
- 9-sided cookie
- 12-sided cookie
- Ghost-ish
- 4-leaf clover
- 8-leaf clover
- Burst
- Soft burst
- Boom
- Soft boom
- Flower
- Puffy
- Puffy diamond
- Pixel circle
- Pixel triangle
- Bun
- Heart
Using the scale
- Larger components, larger corners. Text fields and chips sit at the small end, cards in the middle, dialogs and sheets at extra large.
- Full for pills. Switches, sliders' handles, badges and round buttons are fully round, whatever the rest of the scale does.
- Change steps, not components. Shape reads as a system when a handful of steps repeat, so edit a step and let every component that uses it follow.