Badge
Compact inline label for status, categories, or short counts in tables and navigation.
Pick appearance, size, and color for the emphasis you need. Keep label text short — one or two words or a count. For numeric overlays on avatars or icons use CounterBadge; for availability dots use PresenceBadge — not this component.
Brand badge
A filled brand badge highlights new or featured items beside titles, in tables, or on navigation. Keep labels to one or two words.
New
Appearances
Filled, tint, outline, and ghost presets trade emphasis against surrounding chrome.
FilledTintOutlineGhost
Sizes
Size presets scale badge height and padding for inline labels versus navigation counts.
S
L
Semantic colors
Map badge color to success, warning, danger, or informative semantics for status labels.
OKWarnErrInfo