Primitives
Chip
Compact element for displaying tags, filters, or status indicators. Supports multiple variants, colors, and optional dismiss action.
Live Demo
Solid, bordered, dot indicator, and dismissible chip variants.
Solid Chips
PrimarySuccessWarningDanger
Bordered Chips
PrimarySuccessWarningDanger
Dot Indicator
ActiveOnlineAwayOffline
Dismissible
Click X to dismissPermanent
Installation
npm install @trinkui/reactImport
import { Chip } from "@trinkui/react";Usage
ReactTypeScriptTailwind
<Chip color="primary">React</Chip>
<Chip color="primary">TypeScript</Chip>
<Chip color="primary">Tailwind</Chip>Variants
SolidBorderedFlatDot
<Chip variant="solid" color="primary">Solid</Chip>
<Chip variant="bordered" color="primary">Bordered</Chip>
<Chip variant="flat" color="primary">Flat</Chip>
<Chip variant="dot" color="primary">Dot</Chip>Colors
DefaultPrimarySecondarySuccessWarningDanger
<Chip color="default">Default</Chip>
<Chip color="primary">Primary</Chip>
<Chip color="secondary">Secondary</Chip>
<Chip color="success">Success</Chip>
<Chip color="warning">Warning</Chip>
<Chip color="danger">Danger</Chip>Dismissible
Removable
<Chip color="primary" onDismiss={() => console.log("dismissed")}>
Removable
</Chip>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "solid" | "bordered" | "flat" | "dot" | "solid" | Visual style of the chip |
| color | "default" | "primary" | "secondary" | "success" | "warning" | "danger" | "default" | Color scheme of the chip |
| size | "sm" | "md" | "lg" | "md" | Size of the chip |
| onDismiss | () => void | -- | Callback when dismiss button is clicked; shows close icon when set |
| avatar | ReactNode | -- | Avatar element displayed at the start of the chip |
| startContent | ReactNode | -- | Content rendered before the chip label |
| endContent | ReactNode | -- | Content rendered after the chip label |
| className | string | -- | Additional CSS classes |
Accessibility
- Dismiss button includes an
aria-labelfor screen readers. - Color is never the sole indicator of meaning; text labels always accompany status colors.
- Chips are non-interactive by default unless
onDismissis provided.