Badge

A small status/category label. Not polymorphic — a badge is always inline, since there's no layout reason to render it as anything but a <span>.

<Badge variant="success">
  ...
</Badge>

Examples

variant communicates status at a glance — pick the one that matches what actually happened, not just whichever looks best next to the surrounding content:

<Row gap="8">
  <Badge variant="neutral">Draft</Badge>
  <Badge variant="success">Published</Badge>
  <Badge variant="warning">Pending review</Badge>
  <Badge variant="error">Failed</Badge>
</Row>

For a tag the user can remove, reach for Chip instead — Badge has no onRemove, by design.

Props