Chips & Badges
Status indicators, tags, and labels for categorizing and highlighting information.
Chip Variants
Different visual styles for chips to indicate various states and categories.
Chip Sizes
Three standardized sizes for different contexts.
Removable Chips
Chips with remove functionality for filtering and tagging.
Common Use Cases
Practical examples of chip usage in different scenarios.
Status Indicators
Category Tags
Skill Tags
Badge Variants
Compact labels and indicators for inline use.
Badge Use Cases
Common scenarios for using badges in UI.
Notification Counts
Status Labels
Table Status Indicators
| Student Name | Status | Level |
|---|---|---|
| Aminata Koroma | Active | Year 3 |
| Mohamed Sesay | On Leave | Year 2 |
| Fatmata Bangura | Graduated | Alumni |
When to Use Chips vs Badges
Guidelines for choosing between chips and badges.
Use Chips When:
- • Filtering or categorizing content
- • Items need to be removable
- • Displaying multiple selected options
- • Creating interactive tags
- • Showing status with more emphasis
Use Badges When:
- • Displaying counts or numbers
- • Showing status in tables
- • Adding subtle labels inline with text
- • Notification indicators
- • Version or category labels
Accessibility Guidelines
Best practices for accessible chips and badges.
Color is Not the Only Indicator
Don't rely solely on color to convey meaning. Always include text labels like "Approved", "Pending", "Error" rather than just colored badges.
Removable Chips
Remove buttons on chips must be keyboard accessible and have clear labels for screen readers (e.g., "Remove Computer Science tag").
Sufficient Contrast
All chip and badge text must have at least 4.5:1 contrast ratio against its background. Use our semantic color variables to ensure compliance.