Border radius
We don’t currently offer border radius tokens or Figma styles, but as general guidance, the size of the component determines the border radius.
This is how we use border radius in Helios components.
| Size | Value | Examples |
|---|---|---|
| Extra small | 3px | Checkbox |
| Small | 5px | Badge, Button, Form Components |
| Medium | 6px | Card, RadioCard, Alert, Toast |
| Large | 8px | Modal |
How to use these styles
You can apply a border radius to a UI element via design tokens.
Design tokens
Use the border radius design tokens directly in your CSS definitions.
.your-selector {
border-radius: var(--token-border-radius-medium);
}