Badge

Heights 16/20/22px, radii r4/r6 (small/medium share r4; large is r6), weight 500.

Installation

npm install @crisp-ui-kit/crisp

Props

Examples

Tones

All five tones in the default soft variant.

Status dot

Pass dot for a leading status dot in the tone colour — for "Enabled/Paused" status pills.

Solid

variant="solid" pairs each tone with a matching compound class (badge--compound_0…4) that the Badge component applies automatically.

Sizes

Three sizes — small (16px), medium (20px), large (22px).

With icon

The badge's gap: 4px spaces a leading icon from the label.

Nav unread count

tone="brand" variant="solid" size="small" — Attio's own sidebar nav count ("Tasks · 1"), not a distinct component: it's bit-for-bit this combination against tokens Badge already measures.

Accessibility

Badge renders a plain, non-interactive <span> — it is never focusable and carries no implicit ARIA role. If the badge conveys state that matters to a screen reader user (e.g. "3 unread"), make sure that meaning is also present in the surrounding text; do not rely on tone color alone to communicate status.