Badge

Small status or count label. Use it when the label carries real information, not as decoration.

Variants

NeutralAccentSuccessWarningDangerInfo

<Badge>Neutral</Badge>
<Badge variant="accent">Accent</Badge>
<Badge variant="success">Success</Badge>
<Badge variant="warning">Warning</Badge>
<Badge variant="danger">Danger</Badge>
<Badge variant="info">Info</Badge>

Outline style

NeutralAccentSuccessDanger

<Badge style="outline">Neutral</Badge>
<Badge variant="accent" style="outline">Accent</Badge>

Sizes

SmallMedium

<Badge size="sm">Small</Badge>
<Badge size="md">Medium</Badge>

Props

Prop	Type	Default	Description
`variant`	`neutral \| accent \| success \| warning \| danger \| info`	`neutral`	Semantic color.
`style`	`solid \| outline \| soft`	`solid`	Fill treatment (soft inherits the tint).
`size`	`sm \| md`	`md`	Padding and font size.

Theming

:root {
  --ink-badge-radius: 999px;   /* pill badges */
}

Accessibility

A badge is text: make sure the label alone carries the meaning.
Do not rely on color alone for status. Pair the color with the word.