Chip

The same measured pill RecordsTable, RecordPanel and MultiSelect already draw as .crisp-recordstable-tag (22px tall, padding: 0 4px, pill radius, 14/20 weight 500), exported standalone for surfaces that need one without a table or a fixed option set — a free-text tag list, a filter row.

Installation

npm install @crisp-ui-kit/crisp

Props

Tones

Eight tones, matching the tinted status colours used across the rest of crisp.

Appearance and selected

docs/study/korean/ (Naver and Kakao's own product UIs) found a three-state read that crisp's single tinted chip used to conflate: a filled chip (the default) reads as a status or value — not clickable. An outline chip reads as actionable — a tag or filter you can tap. selected overrides either to a dark fill, once tapped. Structural reference is seed-design's own chip.yaml (variant: solid|outlineStrong|outlineWeak, each with a selected state); the colours are crisp's own tone tokens, not Naver/Kakao's.

appearance="outline" only clears the fill (background: transparent) — it keeps the tone's own text colour and ring, so the tone still reads the same across both appearances. The neutral tone's outline ring is borderDefault rather than the (much fainter) borderSubtle every other tone's own ring already clears on its own tint — see chip.recipe.ts if you're adding a ninth tone.

Single-line scrolling row

A row of Chips wraps onto a second line once it runs out of horizontal width — which breaks a table header's one-line density. ChipGroup keeps the row on one line by scrolling instead, each chip snapping to the left edge (the same pattern Tabs' own overflow="scroll" uses for a tab row).

Notes

• No remove button yet. Attio's removable × on a chip needs a live, populated multi-value editor to measure against, and none was reachable when Chip was first built — a person's "Email addresses" field was empty on the only record checked, and "Categories" removes via a checkbox toggle, not an inline ×. Add one once that surface can be measured; don't guess the icon, its hit target, or its spacing from the label.
• truncate ellipsis-truncates a plain string label when it no longer fits (wraps it in a .crisp-chip-label span). Only meaningful when children is a string — anything else (an avatar, a multi-node label) renders as given, untruncated. No tooltip on hover — a truncated value in Attio is revealed by the cell's own click-to-expand, not by a chip tooltip.
• asChild renders the given element directly (e.g. a <button> or <a> for a real interactive chip), with no wrapping <span> — see the scrolling-row example above.