Skip to main content

Radius

Use radius to round the corners of any element.

Alias radius tokens

To use radiuses consistently make sure you use the alias tokens listed below.

Example Description Token name
  • Rounded none Used when explicitly specifying that a design element shouldn't have rounded corners. Global token used: $radius-00
    $rounded-none
  • Rounded A Used for small tags. Global token used: $radius-02
    $rounded-a
  • Rounded B Used for data visualisation elements, tags, logos and toast components. Global token used: $radius-03
    $rounded-b
  • Rounded C Used in cards, popovers, notifications, headers, navigation bars and side drawers. Global token used: $radius-04
    $rounded-c
  • Rounded D Used in modals and sheets. Global token used: $radius-05
    $rounded-d
  • Rounded E Used in toggles, extended FABs and buttons. Global token used: $radius-06
    $rounded-e