Chip
Chips are compact elements for tags, filters, and selections with optional close or filter actions.
Import
import { Chip } from "@raydenui/ui";Usage
Input Chip (with close button)
React
TypeScript
Tailwind
<Chip variant="input" onClose={() => removeTag()}>
React
</Chip>Filter Chip (with chevron)
Category
Status
<Chip variant="filter" onClick={() => openFilter()}>
Category
</Chip>States
Default
Focused
Disabled
// Default
<Chip variant="input">Default</Chip>
// Focused
<Chip variant="input" focused>Focused</Chip>
// Disabled
<Chip variant="input" disabled>Disabled</Chip>With Avatar
John Doe
<Chip variant="input" avatar="/avatars/user.jpg" onClose={() => {}}>
John Doe
</Chip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "input" | "filter" | "input" | Chip variant |
focused | boolean | false | Focused state |
disabled | boolean | false | Disables the chip |
avatar | string | — | Avatar image URL |
onClose | () => void | — | Close button handler (input variant) |
onClick | () => void | — | Click handler (filter variant) |
className | string | — | Additional CSS classes |
Accessibility
- Uses semantic
<button>element - Close button has proper aria-label
- Keyboard accessible
Last updated on