Figma badge components

Badges are the interface's shorthand. "Active", "3 unread", "Beta": tiny labels that let users scan state without reading sentences. They appear in tables, cards, navigation, dashboards, and page headers, which means they get instantiated more often than almost anything else in a design system.

Because they're small, teams tend to improvise them, and six months later the product has nine slightly different pills that no one remembers approving. The 3 badge components and 666 variants above exist so status always looks the same wherever it appears.

Badges vs tags: know the difference

A badge is read-only. It reports status, category, or count, and clicking it does nothing. A tag (or chip) is interactive: users add them, remove them, and filter with them. The visual overlap causes real confusion, and the practical test is simple: if it needs an X to remove it or reacts to a click, it's a tag.

Nielsen Norman Group's indicator guidance frames badges well: contextual signals attached to the thing they describe, not standalone messages.

Three shapes, three sizes, twelve colors

The set includes three families: a rounded rectangle badge, a modern bordered style, and a fully rounded pill, each in sm, md, and lg sizes. Colors cover the five semantic staples (gray for neutral, brand, success, warning, and error) plus seven accent hues for categorical labelling, like tagging projects or teams where the color means "different", not "good or bad".

Keeping the semantic five consistent across your product is the discipline that makes badges scannable; the moment success is sometimes green and sometimes blue, users go back to reading every label. Sizes follow the same logic: sm inside dense tables, md in cards and lists, lg when a badge sits beside a page title and needs the extra presence.

Beyond the label: dots, icons, flags, and counts

Each badge takes optional extras: a leading status dot, leading or trailing icons, an icon-only version, an avatar, a country flag, or an X close for the rare dismissible case. Dots carry live status well (the green dot next to "Online" does the talking), country flags handle locale and currency labels, and avatars turn a badge into a compact attribution.

Pair them with buttons and inputs and the whole row reads as one system because the heights and radii are designed together.

Don't let color do all the work

A badge whose only signal is its hue fails a meaningful share of users. Roughly 8% of men have some form of color vision deficiency, and to many of them a red "Failed" and a green "Passed" pill look like the same gray-ish label.

WCAG 1.4.1 is explicit that color can't be the only means of conveying information, which is why these badges always carry a text label, and why the dot and icon variants exist: the shape adds a second channel that survives any kind of vision.

When it's time to build, the same badges exist in code. Untitled UI React badges are open source, built with Tailwind CSS, and mirror these Figma components color for color, so the status system your designers agreed on is the one that ships.