Badges

Change the props and copy the result.

Reach for the plain Badge for most labels. The rest of the family exists for the metadata it carries: a status dot, an icon, a country flag, an image, a dismiss button, an icon-only chip, and the announcement-style BadgeGroup. Each name links to its variants below. There is no states section, because a badge has none to force: everything here is static except the dismiss button on BadgeWithButton, whose hover and focus treatments are live in its gallery.

The plain text badge: use it wherever content needs a status, category, or count beside it. Pick the type for the shape, the color for the meaning, and the size for the surface’s density. The full space follows in 3 sections, one per type, with the color axis read from the kit’s exported filledColors object: 11 colors across the top, the 3 sizes down the left.

Each member adds one piece of metadata to the same chip, and each runs the same three sections as the plain badge above: colors across the top, the 3 sizes down the left, one section per type. The dot and icon variants keep every color in their modern section, because that treatment keeps the chip neutral and tints only the addon; the flag, image, dismiss, and icon-only members follow the plain badge and take modern in gray alone, so their modern section is the single gray column.

An announcement chip: a small badge nested inside a wider pill, for release banners and hero eyebrows. Its full space follows in 2 sections, one per theme: 5 colors down the left, the 2 aligns across the top, and both sizes in every cell, each color carrying the message the Figma sheet writes for it. It is also the one member with hover styling and a pointer cursor, yet it renders no interactive element, so wrap it in a real link or button when it should go somewhere.