Chip

A compact interactive element used for filters, tags, suggestions, or input tokens.

Import

tsx

import { Chip } from '@tac-ui/web';

Playground

Interactively configure the Chip props below.

Variant

Label

tsx

<Chip variant="filter">Chip</Chip>

Variants

Five visually distinct variants: filter (accent text + glass blur), assist (solid secondary fill), suggestion (dashed border, outlined), input (semi-transparent fill + solid border), and glass (heavy frosted blur).

tsx

<Chip variant="filter">Filter</Chip>
<Chip variant="assist">Assist</Chip>
<Chip variant="suggestion">Suggestion</Chip>
<Chip variant="input">Input</Chip>
<Chip variant="glass">Glass</Chip>

With Dismiss

Provide an onDismiss callback to render the remove button. Clicking the × button stops propagation and calls onDismiss without triggering the chip's own onClick.

tsx

<Chip variant="filter" onDismiss={() => {}}>React</Chip>
<Chip variant="input" onDismiss={() => {}}>TypeScript</Chip>
<Chip variant="suggestion" onDismiss={() => {}}>Next.js</Chip>

With Icon

Add a left icon with the leftIcon prop; it is rendered at 14×14px and adjusts padding automatically.

tsx

<Chip
  variant="assist"
  leftIcon={
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
      <circle cx="8" cy="8" r="6" />
      <path d="M8 5v3l2 2" strokeLinecap="round" />
    </svg>
  }
>
  Scheduled
</Chip>
<Chip
  variant="filter"
  leftIcon={
    <svg viewBox="0 0 16 16" fill="currentColor">
      <path d="M8 2a6 6 0 100 12A6 6 0 008 2zm0 1a5 5 0 110 10A5 5 0 018 3z" />
    </svg>
  }
>
  Active
</Chip>

Disabled

Pass the disabled prop to mute the chip and block all pointer interactions.

tsx

<Chip variant="filter" disabled>Disabled Filter</Chip>
<Chip variant="assist" disabled>Disabled Assist</Chip>

API Reference

Prop	Type	Default	Description
variant	"filter" \| "assist" \| "suggestion" \| "input" \| "glass"	"filter"	Visual and behavioral style of the chip.
onDismiss	() => void	-	Callback fired when the dismiss button is clicked. Renders the dismiss button when provided.
leftIcon	React.ReactNode	-	Icon rendered to the left of the chip label at 14×14px.
disabled	boolean	false	Disables the chip, muting it visually and blocking pointer interactions.
children	React.ReactNode	-	Label content of the chip.