Badge Row

A flex-wrapped row of Badge components for tags, categories, skills, and status collections. Controls overflow gracefully and prevents arbitrary color usage for status mapping.

datasimple

Badge Row

A flex-wrapped row of Badge components for tags, categories, skills, and status collections. Controls overflow gracefully and prevents arbitrary color usage for status mapping.

ReactTypeScriptNext.jsTailwind

Mixed Variants

Each badge carries its own semantic variant — for status collections where each item has a different state.

StableBetaDeprecatedDraft

Outline

All badges use the secondary/outline style — for neutral tag collections without semantic meaning.

Design SystemsFigmaTokensComponents