components
Badge
A small, non-interactive status label. Uses the same tone and emphasis model as the rest of the system. Pill-shaped, with an optional leading icon.
Tones, soft
The default emphasis. Quiet and legible.
neutralneutral
primaryprimary
secondarysecondary
accentaccent
successsuccess
warningwarning
dangerdanger
infoinfo
Emphasis
Newsolid
Newsoft
Newoutline
Newghost
Sizes and icons
Donesm
Donemd
7 day streakwith icon
Readsolid
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tone | Tone | neutral | Semantic intent. |
| emphasis | Emphasis | soft | solid, soft, outline, ghost. |
| size | "sm" | "md" | md | Label size. |
| icon | ReactNode | none | Optional leading icon. |