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.
    $rounded-none
  • Rounded A Used for small tags.
    $rounded-a
  • Rounded B Used for data visualisation elements, tags, logos and toast components.
    $rounded-b
  • Rounded C Used in cards, popovers, notifications, headers, navigation bars and side drawers.
    $rounded-c
  • Rounded D Used in modals and sheets.
    $rounded-d
  • Rounded E Used in toggles, extended FABs and buttons.
    $rounded-e