Atoms / Chip

Chip

<Chip />Stable

The interactive badge — a Badge states, a Chip acts. A native toggle button wearing Badge's tone matrix 1:1: all 25 tones, soft at rest; selected deepens the same tint with a soft outline (fill="solid" forces the Badge-solid emphasis), always the same hue, weight never flips — any tone Badge learns, Chip learns free. Pick by system-label kind: categorical tones for identity values, semantic tones only when the value itself is a status, omit for the default gray→primary chip. The md size is the shipped Search-rail pill (30px / 13px), promoted pixel-identical from FilterPill; sm rides the control scale. For removable tags, pass onRemove — the body goes passive and the dismiss glyph becomes the chip's only control (or compose ChipRemove inside a Badge for badge geometry) — one interactive surface per chip, never two.

import { Chip, ChipGroup, ChipRemove } from "@/components/upnext";

Explorer

Edit any prop in the inspector — preview and code update together. Hover any color for hex + token.

Tone

State

Size

Dot

<Chip>WR</Chip>

Inspector

Edit one prop at a time and see the token chain resolve. The preview re-renders, the code panel updates, and the resolves-to column shows every Tailwind class → CSS variable → final value.

Preview

Code

import { Chip } from "@/components/upnext";


<Chip>WR</Chip>

States

<Chip>WR</Chip>

Composition

Start with the variant sheet — every tone × state as a specimen grid, identical content per cell so color is the only variable. The other tabs are real-use compositions.

Rest (soft)SelectedDotDot · selectedRemovableDisabledsm
defaultWR
neutralWR
primaryWR
successWR
warningWR
errorWR
infoWR
purpleWR
denimWR
sageWR
pinkWR
cottoncandyWR
orangeWR
tealWR
limeWR
magentaWR
mintWR
slateWR
mustardWR
violetWR
crimsonWR
canaryWR
cobaltWR
cocoaWR
emeraldWR
skyWR
// one row per tone × one column per state — identical content,
// so color is the only variable. tone={undefined} = the default chip.
<Chip tone={tone}>WR</Chip>
<Chip tone={tone} selected>WR</Chip>
<Chip tone={tone} dot={tone}>WR</Chip>
<Chip tone={tone} onRemove={fn}>WR</Chip>
<Chip tone={tone} disabled>WR</Chip>
<Chip tone={tone} size="sm" selected>WR</Chip>

Source

A self-contained atom — no shadcn counterpart. Colors derive from Badge's exported tone matrix; the filter rail re-exports this as FilterPill.