Chip
A compact component used to display information, selections, or actions in a concise format.
Import
Usage
Default
Primary
Success
Colors
Default
Primary
Secondary
Success
Warning
Danger
Lavender
Sizes
Sm
Md
Lg
Border Radius
None
Sm
Md
Lg
Full
With Icons
User
Verified
Warning
Removable
Featured
Usage Examples
Status Tags
Active
Pending
Inactive
Draft
Category Tags
React
TypeScript
Design
Frontend
Tutorial
Removable Tags
JavaScript
CSS
HTML
UI/UX
Data Attributes
- -
data-slot="chip"Chip container identifier
Accessibility
Best Practices
- Use semantic HTML with appropriate roles when chips are interactive
- Provide clear, concise text labels
- When using icons alone, include proper aria-label attributes
- For removable chips, ensure the close button has accessible text
- Use appropriate color combinations to meet WCAG contrast requirements
Chip Props
| Attribute | Type | Default | Description |
|---|---|---|---|
| variant | 'default' | 'default' | Visual style variant of the chip. |
| size | 'sm' | 'md' | 'lg' | 'md' | Size of the chip. |
| radius | 'none' | 'sm' | 'md' | 'lg' | 'full' | 'full' | Border radius of the chip. |
| color | 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'lavender' | 'default' | Color scheme of the chip. |
| startContent | ReactNode | - | Content to display at the start of the chip (e.g., an icon). |
| endContent | ReactNode | - | Content to display at the end of the chip (e.g., an icon or close button). |
| children | ReactNode | - | The text content of the chip. |
