Data display

Badge

A short status or category marker.

Server-renderable1 export

Seven tones across three variants. Because a badge's meaning is usually carried by its colour, `srLabel` lets you supply the words that colour stands for.

Import

import { Badge } from "@abbainitiative/ui";

Also available from the subpath entry @abbainitiative/ui/badge.

This component has no state and no event handlers, so it renders inside a Server Component without a client boundary of your own.

Examples

Tones

NeutralPrimaryAccentActivePendingStatus:OverdueInfo

<Inline gap={2}>
  <Badge>Neutral</Badge>
  <Badge tone="primary">Primary</Badge>
  <Badge tone="success" dot>Active</Badge>
  <Badge tone="warning">Pending</Badge>
  <Badge tone="danger" srLabel="Status:">Overdue</Badge>
</Inline>

Variants

SubtleSolidOutline

SmallMediumLarge

<Inline gap={2}>
  <Badge tone="primary" variant="subtle">Subtle</Badge>
  <Badge tone="primary" variant="solid">Solid</Badge>
  <Badge tone="primary" variant="outline">Outline</Badge>
</Inline>

Props

Badge props. All native attributes of the underlying element are also accepted and forwarded.
Prop	Type	Default	Description
tone	`"neutral" \| "primary" \| "accent" \| "success" \| "warning" \| "danger" \| "info"`	`"neutral"`	Semantic colour role.
variant	`"subtle" \| "solid" \| "outline"`	`"subtle"`	Visual treatment.
size	`"sm" \| "md" \| "lg"`	`"md"`	Size.
dot	`boolean`	`false`	Shows a leading status dot.
srLabel	`string`		Text announced before the label, for when the tone carries the meaning.

Accessibility

Colour is not available to screen readers — use `srLabel` where the tone is the message.
The status dot is `aria-hidden`; it is decoration.
Every tone and variant pairing meets WCAG AA for text contrast.