UI component
Chip
Chip is a compact surface for status, filters, and selected values, with optional icons, pulse feedback, and removable behavior.
Installation
Install the package in your app.
pnpm add @rapidset/rapidkitUsage
Import components from the package entrypoint.
import { Chip } from '@rapidset/rapidkit';Examples
Preview the component and copy the snippet.
Synced
API Reference
Commonly used props at a glance.
| Prop | Description |
|---|---|
| label | Shows the text users should see at a glance. |
| variant | Adjusts the visual tone for emphasis or subtle secondary labels. |
| size | Scales the chip for dense tables, forms, or detail views. |
| icon | Adds quick visual context for statuses and categories. |
| pulse | Draws attention to a live or changing state. |
| onRemove | Turns the chip into a removable token for selected items and filters. |
Accessibility
When the remove action is enabled, the chip exposes a descriptive button label so screen-reader users know which token will be removed.
Optional access rules
Optional access rules let the chip stay hidden or keep its action disabled without introducing product-specific logic into the component.