Badge

Compact status or count label from @duo/ui.

Examples

Properties

Property	Attribute	Description	Type name	Type	Default
`variant`	`variant`	Color variant (`primary`, `secondary`, `success`, …)	`DuoBadgeVariant`	`"primary" \| "secondary" \| "success" \| "danger" \| "warning" \| "info" \| "light" \| "dark"`	`"primary"`
`size`	`size`	`s`, `m` (default), or `l`	`DuoBadgeSize`	`"s" \| "m" \| "l"`	`"m"`
`pill`	`pill`	Fully rounded ends when true	`boolean`	`boolean`	`false`
`label`	`label`	Text when the default slot is empty	`string \| undefined`	`string \| undefined`	`—`

Slots

Name	Description
`default`	Badge text; overrides `label` when provided.

Usage

Guidelines for designers and developers when using badges in product UI.

Do

Use variants consistently so people can learn what each color means (for example success vs. danger).
Use badges to reflect status or a small amount of metadata next to an object or in lists and tables.
Use the pill shape for numeric chips or compact counts when it fits the layout.
Prefer the default slot for label text; use the label attribute when you cannot slot content (for example in some templating setups).

Don’t

Don’t use a badge as the only way to complete a task—pair it with clear copy or actions where needed.
Don’t overload a single view with too many badges; prioritize the states that matter.
Don’t rely on color alone for meaning; the label should still read clearly (see WCAG 1.4.1 Use of Color).

Content guidelines

Prefer short labels, often a single word (for example “Shipped”, “Draft”, “Beta”).
Use sentence case: capitalize the first word; keep the rest lowercase unless it’s a proper noun.
For counts, keep them concise (3, 12+) and consider pill for a chip-like look.
Avoid long sentences inside a badge; if you need a full explanation, use supporting text or a Banner nearby.

Variants

Name	Purpose
`primary`	Default emphasis for general highlights or brand-forward status.
`secondary`	Lower-emphasis or neutral-adjacent status compared to primary.
`success`	Positive or completed outcomes.
`danger`	Errors, blocked states, or destructive context—use sparingly.
`warning`	Needs attention; may require follow-up but isn’t necessarily blocking.
`info`	Informational or neutral notices.
`light`	Subtle badge on darker or busy backgrounds.
`dark`	Strong contrast on light backgrounds.

Sizes

Sizes s, m (default), and l adjust padding and type scale. Use s in dense tables or lists, m for default inline use, and l only when the badge must match larger surrounding text.