One-line: a status word attached to something else — never a standalone label, never a button substitute.

```jsx
<Badge variant="info">Upcoming</Badge>
<Badge variant="success" size="sm">Live</Badge>
<Badge variant="outline">v1.18.6</Badge>
```

The four status variants (\`error\`/\`info\`/\`success\`/\`warning\`) are an 8% tint with the darker foreground — they never use a solid fill. Solid fills are reserved for \`default\` and \`destructive\`.

Badges are pills at every size — a fully rounded shape with 8px side padding (6px `sm`, 10px `lg`) — so a single character reads as a dot and a word reads as a token.
