Chip

Markdown

A compact label that links or can be removed, with a group that wraps or scrolls. For choices, use ToggleGroup.

Use it for: Removable selections or tag links in a row.
Not for: Choosing between options; that is a ToggleGroup. Try ToggleGroup or Tag.

Retrieval Orchestration Evaluation Observability

Loading example…

Installation

npm install @stackunseen/ui

import { Chip } from '@stackunseen/ui';

Styles: @stackunseen/ui/styles.css

Usage and props

Chips only ask; your app applies the filter. Link chips render the LinkProvider link when one is set. Active fills use --ai-chip-active-background and --ai-chip-active-color so labels keep their contrast.

Supported inputs

This is the public signature used by this example. Open Code to see how the values and callbacks fit together.

children · href/active/current? + anchor props | onRemove/removeLabel · swatch? · size?: default | sm · disabled? · ChipGroup: label · overflow?: wrap | scroll

How state and callbacks work

All props

Loading…

For your coding agent

Give the agent this page instead of a screenshot. The prompt wraps the page with the install and import lines and the rule that your server, not a click, completes an action.

Contract: children · href/active/current? + anchor props | onRemove/removeLabel · swatch? · size?: default | sm · disabled? · ChipGroup: label · overflow?: wrap | scroll
Keeps honest: Chips only ask; your app applies the filter. Link chips render the LinkProvider link when one is set. Active fills use --ai-chip-active-background and --ai-chip-active-color so labels keep their contrast.
MCP: read_component "Chip" on the docs endpoint

Open the Markdown file

Keyboard and customization

Keyboard

Link chips are links; the remove control is a button. Backspace or Delete on a removable chip removes it.

Customization

Change shared colors, spacing, corners and icons with the theme. Use the component's supported props to adapt its content and layout. Customization guide and Theme Studio