Badge — Loidolt Theme

import { Badge } from '@loidolt/theme-svelte';

Example

Draft Live Ready Review Blocked Queued

Approved Changes requested 4 99+

Sized to match Inline default

Defaults to size="inline", scaled to the text it annotates. Standing in a row of controls, give it their size instead.
The pill silhouette is the system’s only rounded corner, which is exactly what keeps it from reading as a button.
count shows a number, capped at max as 99+. Add label for the visually hidden context ("4" is heard as "4 unread comments"), and live when the count changes while the user watches.
dot leads with a marker in the badge's colour.

Generated from the component source, so it cannot drift from the implementation.

Badge props
Prop	Type	Default	Notes
`children`	`Snippet`	`—`
`class`	`string`	`—`
`count`	`number`	`—`	A number to show instead of `children`, e.g. unread items. Above `max` it reads `99+`.
`dot`	`boolean`	`false`	A leading dot in the badge's colour — a status marker that still reads in greyscale.
`label`	`string`	`—`	Visually hidden context read after the visible text, so "3" is heard as "3 unread messages". Needed whenever the number or word alone does not say what it counts.
`live`	`boolean`	`false`	Announce changes (`role="status"`) — for a count that updates while the user watches.
`max`	`number`	`99`
`ref` bindable	`HTMLSpanElement \| null`	`null`
`size`	`BadgeSize`	`'inline'`
`variant`	`BadgeVariant`	`'default'`

Plus the attributes of HTMLAttributes<HTMLSpanElement>, forwarded to the root element.