Chip
Compact information display with dismissal, click handlers, icon slots, and size variants
Chip
Compact elements for displaying tags, filters, statuses and actions. Supports icons, avatars, deletable and clickable behavior.
Variants
Choose from filled, outlined, soft, gradient and glass styles.
Colors
Apply semantic color tokens across different variants.
Filled
Outlined
Soft
Sizes
Control chip density with the size prop.
With icons
Add leading icons for status, category or brand context.
With avatars
Combine chips with avatars for users and assignees.
Deletable chips
Use deletable and onDelete to make chips removable.
Clickable chips
Add interactions for filters, actions and tags.
Real-world usage
Combine chips in cards for skills, tags or filter bars.
Skills & Tags
Manage your technology stack
Frontend
Backend
Usage Guidelines
When to Use
- Filter tags
- Selection indicators
- Removable items
Accessibility
- Removal action accessible
- aria-label for context
Performance
- CSS-only variants
- Efficient removal
Common Mistakes
- Using as button replacement
- No remove action when expected
Frequently Asked Questions
Related Components
View allCollapsible content sections with single/multiple expansion modes, animation, and keyboard navigation
User avatar with image loading, fallback text generation, status indicators, and shape variants
Stacked avatar display with overflow handling, max count configuration, and hover expansion
Status indicator with variant system, dot mode, positioning, and pulsing animation support