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