Badge
A small label such as Beta, Draft, or Pro that marks an item's status, category, or other quick metadata.
See it
What it is
A badge is a small label attached to content to communicate status, category, or a short piece of metadata. 'Beta' beside a feature name, 'Draft' on a document, and 'Pro' next to a plan are badges. GitHub's colored issue labels are a familiar version: compact words that make a long list easier to scan.
Reach for one when a few words help someone classify or compare an item without opening it. Keep the vocabulary controlled and the text short. A badge describes something; a chip is more likely to be removable or interactive, and a notification badge is the count or dot attached to an icon.
Gotcha: color should reinforce the word, never replace it. 'Failed' and 'Active' need visible text because red and green alone disappear for some users and become ambiguous in print. Do not style a noninteractive badge like a button, and do not shrink its type so far that the page's metadata becomes unreadable.
Ask AI for it
Build a reusable Badge component for status and category labels. Render a noninteractive 'span' with display: inline-flex, align-items: center, min-height: 20px, 6px horizontal padding, border-radius: 999px, and 12px semibold text. Provide neutral, info, success, warning, and danger variants with both visible words and distinct icons so meaning never depends on color alone. Keep contrast at WCAG 2.2 AA levels, allow an optional leading dot marked aria-hidden, prevent wrapping with white-space: nowrap, and do not add button behavior or a pointer cursor.