ComponentsBadge

Components

Badge

Small status and metadata labels (v2: an outlined pill, 1.5px border, w540): tones, hue outlines, solid emphasis, sizes xxs–lg, icons, removable chips.

Tones

Outlined (default, v2) and solid emphasis. Outlined: transparent fill, 1.5px border (neutral border-line 12% | border-strong 20%; tones mix their tint at 22.2% | 40%), radius = height / 2, tone ink. Solid fills use the 450/500 palette steps with white text.

Subtle

neutralaccentsuccesswarningdangerpro

Solid

neutralaccentsuccesswarningdangerpro

Hue outlines

redorangeyellowgreenaquabluevioletmagentaredorangeyellowgreenaquabluevioletmagenta

Sizes

xxs 16 · xs 18 · sm 20 · md 22 (default) · lg 28. Compact density: 16 / 16 / 16 / 18 / 20.

All sizes

xxsxssmmdlgxxsxssmmdlg

Where they appearxxs step-1 tags, md role badges, a call-site h-5 override, sm category chips.

New Beta Added OwnerCurrent Example project +5 3.5× or more usage

Modifiers

Icon only

Mono scope chips

user:file_upload org:read

Truncatemin-w-0 + ellipsis inside a narrow box.

Removable

user:file_uploadorg:readproject:write Large chip Solid

InteractiveAs a link or button: neutral hover fill, focus ring.

shadcn aliasesdefault / secondary / outline → neutral, destructive → danger.

default secondary outline destructive

Light and dark

neutralaccentsuccesswarningdangerproredorangeyellowgreenaquabluevioletmagenta

neutralaccentsuccesswarningdangerproredorangeyellowgreenaquabluevioletmagenta