Badges
Status labels, chips, counts and identity patterns for the application.
Soft
Tinted pills the default variant, six tones.
neutralprimarysuccesswarningdangerinfo
Solid
High-contrast fills via variant=solid.
neutralprimarysuccesswarningdangerinfo
Outline
Border-only chips via variant=outline.
neutralprimarysuccesswarningdangerinfo
Status dot
Surface chip, with tone applied to the status dot.
OperationalDegradedOutageDeployingOffline
Sizes
Small, medium and large across badge variants.
SmallMediumLargev2.4.0All systems go
Removable chips
Trailing via the onRemove prop.
DesignEngineeringMarketingResearch
In context
Counts on icons and statuses inside useful list rows.
624
Liam WalkerPRO
Liam WalkerPROOrder #3201Paid
Order #3202Pending
ServerDown
Avatars
Sizes, presence, fallback and stacked group.
Sophie TurnerLiam Walker
Noah BennettEmma Brooks
+3