Badge Tag Chip

Badge, Tag & Chip Patterns

Badge (notification count)

• Position: top-right corner of icon
• Shape: circle for single digit, rounded pill for 2+ digits
• Color: red for urgent, brand color for neutral
• Max display: "99+" or "9+"
• Size: small enough to not obscure the icon

Tag (categorization)

• Purpose: classify or categorize content
• Style: outlined or subtle background, rounded corners
• Removable: include X button if user-applied
• Color-coded: consistent colors for consistent categories
• Text: short (1-3 words), sentence case

Chip (selection/filter)

• Purpose: compact interactive elements for selection
• States: unselected (outlined), selected (filled)
• Include avatar or icon prefix where helpful
• Removable: X to deselect