Chip
Compact elements representing tags, filters, or selections. Can be dismissible for dynamic tag management.
Variants
Filled Chip
Outlined Chip
Sizes
Small
Medium
Large
Dismissible Chips
React
TypeScript
Next.js
Filter Chips
Active filters:
Calendar
Urgent
This Week
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | 'filled' | 'outlined' | 'filled' | Visual style variant |
size | 'sm' | 'md' | 'lg' | 'md' | Chip size |
dismissible | boolean | false | Show dismiss button |
onDismiss | () => void | - | Callback when chip is dismissed |
className | string | - | Additional CSS classes |
children* | React.ReactNode | - | Chip content |
Usage Guidelines
When to use
- •For user-selected filters or tags
- •For displaying categories or attributes
- •For multi-select interfaces
- •For showing active search refinements
Best practices
- •Use dismissible chips for removable filters or tags
- •Use outlined variant for filter chips
- •Use filled variant for static category labels
- •Keep chip text concise (1-3 words)
- •Group related chips together
- •Provide clear visual feedback on dismiss
Accessibility
- •Dismiss button has aria-label="Remove"
- •Keyboard accessible (Tab to focus, Enter/Space to dismiss)
- •Screen readers announce chip content and dismiss option
- •Sufficient color contrast for text and borders
Do's and Don'ts
✓ Do
- •Use dismissible chips for removable filters
- •Keep chip labels concise and scannable
- •Use outlined variant for filter contexts
Active
Finance
High Priority
✗ Don't
- •Don't use overly long text in chips
- •Don't make non-dismissible chips look clickable
- •Don't use chips for primary actions
This is a very long chip label that wraps
Another extremely verbose chip