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)
Preview
React
TypeScript
Tailwind
<Chip variant="input" onClose={() => removeTag()}>
React
</Chip>Filter Chip (with chevron)
Preview
Category
Status
<Chip variant="filter" onClick={() => openFilter()}>
Category
</Chip>States
Preview
Default
Selected
Disabled
// Default
<Chip variant="input">Default</Chip>
// Focused
<Chip variant="input">Selected</Chip>
// Disabled
<Chip variant="input" disabled>Disabled</Chip>With Avatar
Preview
John Doe
<Chip variant="input" icon="user-circle" onClose={() => {}}>
John Doe
</Chip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "input" | "filter" | "input" | Chip variant |
disabled | boolean | false | Disables the chip |
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