Badge
The Badge component is a compact visual indicator used to communicate status, category, or count at a glance. It helps users quickly identify the state of an item without reading full descriptions.
Badge
tsx
Variants
Brand, neutral (default), success, danger, and warning for semantic states.
BrandNeutralSuccessDangerWarning
Sizes
Three sizes from sm to lg. Each adjusts height, padding, gap, and font size.
SmallMediumLarge
Types
Fill (default) has no border, light adds a solid border, and dash adds a dashed border.
FillLightDash
Filled
Strong background with inverse text. Compare default overlay (top) with filled (bottom).
BrandNeutralSuccessDangerWarning
BrandNeutralSuccessDangerWarning
With Dot
Adds a status indicator dot. Color matches the variant and scales with badge size.
BrandNeutralSuccessDangerWarning