Radius
Corners are softly rounded. Controls get a radius that matches their size, and surfaces such as cards share one radius.
How to use radius
- Give a control the
interactivestep that matches its size: small, default or large. - Give cards and other surfaces
--radius-surface. -
--radius-interactive-lgand--radius-surfacehave the same value today, but they answer different questions. Pick the one that describes the element, so each can change on its own. -
The focus ring follows the shape of the element. An element without a radius of its own, such as a link in
running text, gets
--radius-interactive-smon focus. - A circle, such as a spinner, uses
50%. That is geometry, so it has no token.
Radius roles
| Preview | Token | Value | Use |
|---|---|---|---|
--radius-interactive-sm
|
6 px radius.6 | Tags, and the focus ring around elements that have no radius of their own. | |
--radius-interactive-md
|
10 px radius.10 | Default buttons, icon buttons, the theme switcher and form fields. | |
--radius-interactive-lg
|
12 px radius.12 | Large buttons, such as the call to action in the mobile menu. | |
--radius-surface
|
12 px radius.12 | Cards, error boxes and other surfaces. |
Primitives
Raw values that the roles point to. The name is the value in pixels, so --radius-10 is 10 px.
Use a role instead of these. 6 and 10 px are not on the 4 px grid. That is on purpose: a radius is a design
choice and does not need to follow the grid.
| Preview | Token | Value |
|---|---|---|
--radius-6
|
0.375rem
|
|
--radius-10
|
0.625rem
|
|
--radius-12
|
0.75rem
|