Badge

Compact status/label pill (square, of course).

A small, non-interactive inline label with a semantic `tone` that backs the fill, border, foreground, and an optional leading `dot`. Also does numeric counts (clamped to `max`) and a live status region. Content is optional for dot- or count-only badges. Need a removable chip? That is a Tag/Chip concern, not a Badge.

Demo

live · storybook Open in Storybook

Demo loads from https://dssoca-storybook.vercel.app/. Run pnpm storybook for it to render locally.

Usage

svelte

<script>
  import { Badge } from 'dssoca';
</script>

<Badge tone="positive" dot>up</Badge>
<Badge tone="critical">down</Badge>
<Badge tone="info">to_watch</Badge>
<Badge count={42} label="unread" />

Props

Prop	Type	Default	Description
`tone`	`'brand' \| 'neutral' \| 'positive' \| 'caution' \| 'critical' \| 'info'`	`'neutral'`	Semantic tone; sets fill/border/foreground + dot colour. `neutral` is the baseline for non-status labels.
`size`	`'sm' \| 'md' \| 'lg'`	—	Per-instance size override; inherits the ancestor `data-size-variant` when unset.
`dot`	`boolean`	`false`	Render the leading status dot.
`count`	`number`	—	Numeric badge, clamped to `max`. A count of 0 renders nothing.
`max`	`number`	`99`	Cap for `count`; values above render as `${max}+`.
`live`	`boolean`	`false`	Treat as a live status region (role="status", aria-live="polite") so AT announces changes.
`label`	`string`	—	Accessible label; required for dot- / count- / label-less badges so status is not colour-only (WCAG 1.4.1).
`children`	`Snippet`	—	Badge text. Optional — omit for a dot-only or count-only badge.