Badge
Badges are used to highlight status, categories, or counts. Use them sparingly to maintain their impact.
Variants
Different styles for different meanings.
DefaultSecondaryOutlineDestructive
With Icons
Icons can reinforce badge meaning.
CompletedPendingReviewFailed
Status Examples
Common status badge patterns.
ActiveWarningInfoErrorInactive
Counts
Badges work well for counts and notifications.
Messages3
Notifications12
Tasks99+
In Context
Badges combined with other elements.
Feature RequestEnhancementOpen
Add dark mode support to the dashboard
Bug ReportBugClosed
Button click not working on mobile