
<View direction="row" align="center" justify="center" gap={6}>
  <div
    style={{
      background: "var(--uic-color-background-neutral)",
      borderRadius: "var(--uic-unit-radius-small)",
      width: 60,
      height: 60,
    }}
  />
  <div
    style={{
      background: "var(--uic-color-background-neutral)",
      borderRadius: "var(--uic-unit-radius-medium)",
      width: 80,
      height: 80,
    }}
  />
  <div
    style={{
      background: "var(--uic-color-background-neutral)",
      borderRadius: "var(--uic-unit-radius-large)",
      width: 120,
      height: 120,
    }}
  />
</View>

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

--uic-unit-radius-small
--uic-unit-radius-medium
--uic-unit-radius-large

/* 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.

Unit

Shadow