Radius
Corner radii for each kind of surface, from 6px buttons to fully round pills.
Scale
Eight values, from square to pill.
none · 0
sm · 4px
md · 6px
lg · 8px
xl · 10px
2xl · 12px
3xl · 16px
full · 9999px
In components
Each kind of object has its own radius. The bigger the box, the bigger the corner.
button · 6
Online
badge · 6
card · 8
field · 10
dialog · 16
Bore 12
chip · 24
Usage
- Use
--radius-sm(4px) for checkboxes and skeleton text. - Use
--radius-md(6px) for buttons, badges, icon buttons and menu rows. - Use
--radius-lg(8px) for cards, selects, chip inputs, dropdowns and alerts. - Use
--radius-xl(10px) for the text input. - Use
--radius-3xl(16px) for dialogs. - Use
--radius-fullfor radios, toggles, avatars and presence dots. - Use 24px for chips. It has no token.