Badge

Demo & usage

More examples

<sv-badge label="Live" variant="success" [dot]="true" [pulseDot]="true" />
<sv-badge label="Inbox" variant="primary" [count]="12" [maxCount]="9" />

<sv-badge label="Solid" variant="warning" />
<sv-badge label="Soft" variant="warning" badgeStyle="soft" />
<sv-badge label="Outline" variant="warning" badgeStyle="outline" />

<!-- Announce updates to assistive tech -->
<sv-badge variant="danger" [count]="unread()" [live]="true" ariaLabel="Unread messages" />
<sv-badge label="Beta" variant="info" [dismissible]="true" (dismissed)="hide()" />

When to use

• Labelling status, category or counts inline with other content.
• You need a small, color-coded indicator next to titles, rows or icons.
• For interactive, removable tokens use a Chip instead.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Eight tones with published meanings — see the tone table above; the meaning is the contract, and the colour is downstream of it.
• Seven semantic variants across solid, soft and outline.
• Optional leading dot or icon, plus count mode and a dismiss button.
• Set `live` for dynamic counts/statuses that should be announced; override the name with `ariaLabel`.

Best practices

• Do: Pick a tone by what it MEANS, not by what colour you want. The eight are: primary (the default emphasis, no status claim), secondary (present but deliberately quieter), success (a completed or healthy state), warning (something needs attention but nothing has failed), danger (a failure, a block, or a destructive consequence), info (context the reader did not ask for and cannot act on), neutral (a plain label or count with no status at all), and brand (a product or plan name, never a state).
• Don't: Do not use warning for a failure or danger for something merely unusual. Seven tones with no published meaning is how 'warning' becomes whatever each team decides, and a reader who has learned your dashboard's dialect cannot carry it to the next screen. Badges are everywhere, which is what makes the drift expensive.
• Do: Reach for neutral more often than feels natural. Most badges are labels and counts rather than statuses, and giving those a semantic colour spends the reader's attention on something that was never a signal.
• Tip: brand exists separately from primary on purpose: a kit can legitimately have a highlight colour and a brand colour that differ. Use it for a product or plan name, never for a state.
• Do: Keep a consistent variant→meaning mapping (success, warning, danger) app-wide.
• Do: Cap counts with `maxCount` so the badge never grows unbounded.
• Don't: Don't rely on color alone — the label/text should carry the meaning.

Accessibility

• The pulsing status dot stops under `prefers-reduced-motion` but the DOT REMAINS. A small, peripheral, endless animation is the shape most likely to trigger a vestibular response, and it is exactly what the preference exists for — but the dot is the status indicator, so removing it would delete information to fix a comfort problem.
• Every one of the 24 tone x style combinations is contrast-checked in both themes by `check:contrast`, which scores the class pairs where they are declared rather than where they render.
• Readable contrast for every variant in both themes.
• Conveys meaning with text, not just color; the dot/icon are decorative.
• Static badges carry no ARIA live region by default — opt in with `live` only for values that update in place, so screen readers are not spammed.
• The dismiss button is a labelled control ("Remove …").