Badge — Token Model

badge.bg.[color]
badge.text.[color]

badge.size.[size]
badge.size.[size].padding.x
badge.size.[size].padding.y
badge.size.[size].radius
badge.size.[size].font
badge.size.[size].minWidth

badge.icon.size          // if badge has an icon instead of / with number

badge.dot.bg.[color]
badge.dot.size
badge.dot.radius
badge.dot.offset.x
badge.dot.offset.y

🧾 Explanation

• badge.bg.[color]

  Background for the container badge (the one with number or text).

  • [color] = neutral, brand, danger, warning, success, etc.

• badge.text.[color]

  Text / number color inside the container badge.

  • Used for 1, 99+, or short label.

• badge.size.[size]

  Size preset for container badges.

  • [size] = small, large (or whatever sizes you define).

• badge.size.[size].padding.x / .padding.y

  Horizontal and vertical padding inside the container badge.

• badge.size.[size].radius

  Corner radius for the container badge (pill vs rounded rectangle).

• badge.size.[size].font

  Typography style for the number/text at that size.

• badge.size.[size].minWidth

  Ensures small numbers like 1 or 2 don’t collapse too small.

• badge.icon.size

  Size of an optional icon inside the badge (e.g., info, alert).

  • Used when badge has an icon instead of only a number.

Dot Badge tokens

• badge.dot.bg.[color]

  Background color of the dot badge (status / notification dot).

  • [color] = neutral, brand, danger, etc.

• badge.dot.size

  Diameter of the dot (e.g., 6px / 8px).

• badge.dot.radius

  Radius for the dot; usually 50% (circle).

• badge.dot.offset.x / badge.dot.offset.y

  Position of the dot when attached to another component (like an avatar or icon).

  • Controls where the dot sits: top-right, bottom-right, etc.