Badge
A static marker for a status, a category, or a small count. It is not a link and not a button. Nothing inside it is interactive.
Variants
Six variants. default and secondary fill; outline draws a border only. The status trio success, warning, and error shares one shape: a soft tint behind colored text.
Error is a status
The error variant paints from the --error tint pair, never from --destructive. Destructive red names an action a person can take, such as delete. Error red reports a state that already exists.
Size
One size: 20px tall at text-xs, in a full pill. A badge sits inside a line of text or a table cell, so a second size would break the line rhythm it lives in.
Icon
The icon prop takes one leading icon. The badge owns the 12px icon size, the gap to the label, and the aria-hidden that keeps the icon out of the reading order. Pass the icon bare. There is no trailing icon slot.
Motion
None, by decision rather than omission. A badge has one state and never changes it in place. An app that mounts a badge as the result of a change animates the mount itself.
Accessibility
The badge renders a plain span. It takes no focus and no tab stop, and it carries no ARIA role, so a screen reader reads its text inline with the surrounding content. A leading icon is decoration and is hidden, so the label is read once. Every variant meets WCAG AA contrast in both modes. When the badge is the only carrier of a meaning, give the surrounding text that meaning as well: color alone never states a status.