Badges & status

Label and mark state: badges, tags, status dots and live indicators.

Badge #

Count / status pill.

Active

<Badge tone="success">
    Active
</Badge>

Prop	Type	Default	Description
`children`	`content`		Badge text.
`rounded`	`boolean`		Pill shape.
`tone`	`"accent" \| "warning" \| "success" \| "danger" \| "muted"`	`"accent"`	Compact count / status pill — prefer Tag for labeled chips.

BadgeTone

type BadgeTone = "accent" | "success" | "warning" | "danger" | "muted" | undefined;

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Tag #

Small label for categories and filters, optionally removable.

Deployed

<Tag color="success">
    Deployed
</Tag>

Slots: root label remove

Prop	Type	Default	Description
`children`	`content`		Tag text.
`color`	`"accent" \| "dark" \| "light" \| "link" \| "warning" \| "success" \| "info" \| "danger" \| "primary" \| "neutral" \| "black" \| "white"`		Color / tone. Prefer semantic colors (primary, success, …).
`light`	`boolean`		Pale background with coloured text instead of a solid fill.
`onRemove`	`() => void`		Shows a remove (×) button; called when it is pressed.
`removeLabel`	`string`	`"Remove"`	Accessible label for the remove button (default "Remove").
`rounded`	`boolean`		Pill shape.
`size`	`"normal" \| "medium" \| "large"`		Tag size.
`tone`	`"accent" \| "danger" \| "neutral"`	`"neutral"`	Deprecated: use `color`

TagColor

type TagColor = | "neutral" | "black" | "dark" | "light" | "white" | "primary" | "link" | "info" | "success" | "warning" | "danger" | "accent" | undefined;

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Parts

Tags #

Group of tags — wraps evenly and supports addon pairs.

typescriptssrsignals

<Tags>
    <Tag>typescript</Tag>
    <Tag>ssr</Tag>
    <Tag color="info">signals</Tag>
</Tags>

Prop	Type	Description
`addons`	`boolean`	Join pairs of tags edge to edge (e.g. a name and a value).
`children`	`content`	The `Tag`s to group.
`size`	`"medium" \| "large"`	Size for every tag in the group.

Status dot & indicator #

Small marks for state and counts.

StatusDot #

Small status indicator (online, busy, …), optionally pulsing.

<StatusDot label="Online" tone="success" />

Prop	Type	Default	Description
`label`	`string`		Accessible name; without it the dot is decorative (`aria-hidden`).
`pulse`	`boolean`		Animate a pulse ring (for live states).
`tone`	`"accent" \| "warning" \| "success" \| "danger" \| "neutral"`	`"neutral"`	Dot colour.

Indicator #

Corner badge / dot over its children.

Interact with the example: callbacks show up here.

<Indicator label={3}>
    <Button variant="outline" onClick={() => {}}>
        Inbox
    </Button>
</Indicator>

Slots: root badge

Prop	Type	Default	Description
`children`	`content`		Element to decorate.
`dot`	`boolean`		A plain dot instead of a label.
`label`	`string \| number`		Badge text or count.
`position`	`"bottom-start" \| "bottom-end" \| "top-start" \| "top-end"`	`"top-end"`	Corner of the child the badge sits on.
`processing`	`boolean`		Pulse, for ongoing activity.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Live & unread badges #

Live state and unread counts.

LiveBadge #

Pulsing "Live" pill.

Live

<LiveBadge />

Slots: root dot

Prop	Type	Required	Default	Description
`label`	`content`		`"Live"`	Badge text.

UnreadBadge #

Count bubble; hidden at 0, capped at max (99+).

Inbox 4

<Text>
    Inbox <UnreadBadge count={4} />
</Text>

Prop	Type	Required	Default	Description
`count`	`number`	yes		Unread count; hidden at 0.
`max`	`number`		`99`	Counts above this show as `max+`.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Semantic badges #

Environment, version, role, priority and severity.

EnvBadge #

Environment pill (production = danger, staging = warning).

staging

<EnvBadge env="staging" />

Prop	Type	Required	Default	Description
`env`	`string`	yes		Environment name; `production`, `staging` and `development` have their own colours.

VersionTag #

Version label (e.g. v1.2.0).

v2.4.0

<VersionTag version="2.4.0" />

Prop	Type	Required	Default	Description
`version`	`string`	yes		Version text (a leading `v` is added).

RoleBadge #

Member role label (admin, member, …).

Admin

<RoleBadge role="Admin" />

Prop	Type	Required	Default	Description
`role`	`string`	yes		Team role label (not the ARIA role).

PriorityBadge #

Issue priority label.

urgent

<PriorityBadge priority="urgent" />

Prop	Type	Required	Default	Description
`priority`	`Priority`	yes		Priority level; sets the colour.

Priority

type Priority = "low" | "medium" | "high" | "urgent";

SeverityBadge #

Incident severity label.

critical

<SeverityBadge severity="critical" />

Prop	Type	Required	Default	Description
`severity`	`Severity`	yes		Severity level; sets the colour.

Severity

type Severity = "info" | "low" | "medium" | "high" | "critical";

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

Save & sync status #

Autosave and sync state of a document.

SyncStatus #

Sync state indicator (synced, syncing, offline, error).

syncing

<SyncStatus state="syncing" />

Prop	Type	Required	Default	Description
`state`	`SyncState`	yes		Sync state; sets the icon and text.
`label`	`string`			Custom text instead of the state name.

SyncState

type SyncState = "synced" | "syncing" | "error" | "offline";

AutosaveIndicator #

Autosave state (saving, saved, error).

Saved

<AutosaveIndicator state="saved" />

Prop	Type	Required	Default	Description
`state`	`AutosaveState`	yes		Save state; sets the icon and text.
`labels`	`Partial<Record<AutosaveState, string>>`			Override the text per state.

AutosaveState

type AutosaveState = "idle" | "saving" | "saved" | "error";

LastSaved #

"Last saved" timestamp.

Last saved 2 minutes ago

<LastSaved at="2 minutes ago" />

Prop	Type	Required	Default	Description
`at`	`string`	yes		When it was saved, as display text (e.g. "2 minutes ago").
`label`	`string`		`"Last saved"`	Prefix text (default "Last saved").

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

TypingIndicator #

Animated "someone is typing" indicator.

<TypingIndicator label="Grace is typing" />

Prop	Type	Required	Default	Description
`label`	`string`		`"Typing"`	Accessible name (default "Typing").

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.