Best Practices
Radius tokens are identified by the prefix $radius, followed by numeric suffixes in a crescent order. The only exception is the most curved value which the suffix is full.
Usage
The radius used in a element is related to its size and placement.
| Token | Usage |
|---|---|
$radius-0 | Page components (Header and Content) and Admin Navigation components (Topbar and Sidebar) |
$radius-1 | Checkboxes, Buttons inside inputs, and Tooltips |
$radius-2 | Buttons, Inputs, and Filters |
$radius-3 | Modals, Alerts, Toasts, Cards, and Popovers |
$radius-full | Tags and Avatars |