Data

Chip

Compact labeled entity (tag) with optional leading icon or avatar, clickable action and a delete button.

Import

import { Chip } from "@zephora/react";

Examples

Variants and colors

Default

Solid

Soft

Outline

Small

Large

<Chip>Default</Chip>
<Chip variant="solid" color="primary">Solid</Chip>
<Chip variant="soft" color="success">Soft</Chip>
<Chip variant="outline" color="info">Outline</Chip>
<Chip color="danger" size="sm">Small</Chip>
<Chip color="warning" size="lg">Large</Chip>

Deletable tags

"onDelete" renders a remove button (aria-label "Remove") after the label.

React

TypeScript

CSS

const [tags, setTags] = React.useState(["React", "TypeScript", "CSS"]);

{tags.map((tag) => (
  <Chip
    key={tag}
    color="primary"
    onDelete={() => setTags((prev) => prev.filter((t) => t !== tag))}
  >
    {tag}
  </Chip>
))}

Clickable with avatar

`onClick` turns the label into a real button with keyboard support.

<Chip avatar={<Avatar name="Ada Lovelace" size="xs" />} onClick={() => console.log("clicked")}>
  Ada Lovelace
</Chip>
<Chip color="neutral" disabled onClick={() => {}}>
  Disabled
</Chip>

API

Chip props

Prop	Type	Default	Description
`variant`	`"solid" \| "soft" \| "outline"`	`"soft"`	Visual style.
`color`	`"primary" \| "success" \| "warning" \| "danger" \| "info" \| "neutral"`	`"neutral"`	Semantic color.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Chip size scale.
`onClick`	`MouseEventHandler<HTMLButtonElement>`	—	Makes the chip label an interactive button with full keyboard support.
`onDelete`	`(event: MouseEvent<HTMLButtonElement>) => void`	—	Renders a delete button (aria-label "Remove") after the label.
`icon`	`ReactNode`	—	Leading icon slot (decorative).
`avatar`	`ReactNode`	—	Leading avatar slot.
`disabled`	`boolean`	`false`	Disables the click and delete buttons.
`unstyled`	`boolean`	`false`	Headless mode — skips Zephora styling.