Badge
Edit this pageBadges are visual indicators that communicate the status, category, or attribute of an object or element. They provide quick recognition and help users understand the state or importance of information at a glance.
Visual IndicatorStatus CommunicationAccessibleSemanticContextual
Primary Purpose of Badges
Understanding when and why to use badges in your interface design.
Core Purpose
- • Status Communication: Show completion, approval, or progress states
- • Categorization: Label content types, topics, or groups
- • Notification: Indicate count or presence of updates
- • Qualification: Show attributes like "New", "Featured", "Premium"
Badge vs Other Components
Use Badge When:
- • Showing status or state
- • Labeling categories
- • Indicating counts
Use Chip/Tag When:
- • Filtering content
- • User input/selection
- • Interactive removal
Badge Types by Function
Completed
Status Badge: Shows completion or progress state
Documentation
Category Badge: Labels content type or classification
3
Notification Badge: Shows count of pending items
References & Further Reading
Essential references for badge component implementation and best practices from leading design systems.