Chip

Installation

npx shadcn@latest add @blank/chip

Usage

import { Chip, ChipAvatar, ChipDismiss } from "@/components/ui/chip"

<Chip>
  <ChipAvatar>
    <img src="/maya.jpg" alt="" />
  </ChipAvatar>
  Maya Chen
  <ChipDismiss aria-label="Remove Maya Chen" />
</Chip>

A chip renders a span, so it can hold its own dismiss button. To make the whole chip a toggle — a filter, a choice — render it as a button with asChild and set aria-pressed; the pressed state is styled the same as selected, in the brand color the rest of the system uses for selection.

<Chip asChild>
  <button type="button" aria-pressed={active} onClick={toggle}>
    Design
  </button>
</Chip>

For a single choice among a few options, ToggleGroup gives you roving focus for free; reach for chips when the set wraps, grows, or mixes in avatars.

Examples

Dismissible

PreviewCode

ToMaya ChenJonas WeberPRPriya RamanLeo Alvarez

Sizes