Radius tokens define the standard corner radius of the components.

UIC supports three radius tokens based on the expected size of the components.

/* Usage */
.element {
border-radius: var(--uic-unit-radius-medium);
  • Small radius is used for small atomic elements like Badge.
  • Medium radius is used for more prominent elements such as Card or large Button.
  • Large radius is used for bigger elements like Modal or decorative blocks that need to stand out.