Chip
Compact, interactive element for tags, filters, and selections. Supports filled/outlined variants, 5 color schemes, 2 sizes, icon, avatar, selection, and deletion.
import
{ Chip } from "@pepulux/ui"Color variants — filled
Five semantic colors. Default is neutral gray.
Default
Brand
Success
Warning
Error
Outlined variant
Border instead of background fill.
Default
Brand
Success
Warning
Error
Sizes — sm / md
sm is 24px tall, md is 32px tall.
Small
Medium
With leading icon
Pass any ReactNode as icon.
Tagged
Featured
Private
Verified
With avatar
Pass a rounded image or avatar component as avatar prop.
OOlivia Rhye
PPhoenix Baker
LLana Steiner
Selection / filter chips
Clickable chips toggle selected state. Combine selected + onClick.
Design
Engineering
Marketing
Sales
HR
Selected: Design
Deletable chips
onDelete shows a × button. Clicking it calls onDelete without triggering onClick.
React
TypeScript
Tailwind
Next.js
Disabled
Dims the chip and blocks all interaction.
Disabled default
Disabled brand
Disabled deletable
Disabled outlined
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label* | string | — | Chip text content |
| variant | "filled" | "outlined" | "filled" | Background fill or border-only style |
| color | "default" | "brand" | "success" | "warning" | "error" | "default" | Color scheme |
| size | "sm" | "md" | "md" | Height — sm 24px / md 32px |
| selected | boolean | false | Highlights the chip in its selected state color |
| onClick | () => void | — | Makes the chip interactive (pointer cursor, enter key support) |
| onDelete | () => void | — | Shows × button; clicking calls this without propagating to onClick |
| icon | ReactNode | — | Leading icon rendered before the label |
| avatar | ReactNode | — | Leading avatar rendered before the label (typically a circular image) |
| disabled | boolean | false | Dims the chip and disables all interaction |
| className | string | — | Additional CSS classes |