Tag
Versatile tag component supporting text, avatars, icons, and removable functionality across three sizes
Interactive States
All States - Large Size
Avatar Tags
Default
Hover
Focused
Selected
Disabled
Disabled Selected
Leading Icon Tags
Default
Hover
Focused
Selected
Disabled
Disabled Selected
Text Only Tags
Default
Hover
Focused
Selected
Disabled
Disabled Selected
Complete state matrix showing default, hover, focused, selected, disabled, and disabled selected states
All Sizes
Medium Size
Small Size
Tag component across all size variants with different states
Tag Sizes
All Size Variants
Small (24px height)
Medium (28px height)
Large (32px height)
Three size options optimized for different contexts and information density
Basic Usage
Text Only Tags
Simple text-only tags for categories, skills, or labels
Tags with Close Button
Interactive tags with close functionality for removable selections
With Avatar
Avatar + Text Tags
Small Size
Medium Size
Large Size
Tags with avatar initials or images for user assignments or mentions
Avatar Tags with Close Button
Removable user tags combining avatar display with close functionality
With Icons
Icon + Text Tags
Small Size
Medium Size
Large Size
Tags with icons for status indicators, categories, or enhanced visual meaning
Icon Tags with Close Button
Removable icon tags for interactive filtering and selection interfaces
Real-World Examples
Skills and Technologies
Frontend Technologies
Backend Technologies
Technology stack and skills representation in profiles or project descriptions
Team Assignment
Project management and task assignment with user avatars and status indicators