Shape
The corner scale of Material 3 Expressive. Corners grow with the container: a chip is barely rounded, a side panel is generously so, and pills and dots are fully round.
Corner scale
-
none
0 px
--sonar-shape-corner-none -
extra-small
4 px
Tooltips, small marks.
--sonar-shape-corner-extra-small -
small
8 px
Chips, pressed buttons.
--sonar-shape-corner-small -
medium
12 px
Cards, fields, menu items.
--sonar-shape-corner-medium -
large
16 px
Menus, banners, buttons.
--sonar-shape-corner-large -
large-increased
20 px
The step between large and extra-large in the Material 3 scale. No component uses it yet.
--sonar-shape-corner-large-increased -
extra-large
28 px
Side panels, search field.
--sonar-shape-corner-extra-large -
full
Full
Pills, avatars, status dots.
--sonar-shape-corner-full
Guidelines
- Nested shapes take a smaller corner than their container, so the curves stay parallel.
- A pressed button changes shape instead of shrinking: its corner goes from large to small, the Material 3 Expressive way of acknowledging a tap.
- Only edges that float get rounded. A sheet attached to the bottom of the screen is rounded on top only.