docs / core / chip

Chip

a compact pill for tags, filters and counts. a chip states something, it does not do something, the only interactive part is the optional dismiss. when the whole thing should toggle, reach for ToggleChip.

intensity · recedesrsc · client

provenance

shaped from personal-website

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

tag rows, filter bars, a count beside a headingvalue carries the number, the label stays textnot a click target. when the whole chip toggles, that is ToggleChipa danger chip states a fact. it does not warn or block anything

a11y

the chip is a plain span · the dismiss button is named by removeLabel with a hit area past the glyph · the x icon is aria-hiddenjest-axe

dependencies

class-variance-authority
live demo · try it out
Engineering
customize
tonesemantic color role
sizesm for dense rows
labelthe text inside
valuetrailing segment behind a divider
selectedglow-ring pressed look for active filters
removablerenders the dismiss button
usagecopy
import { Chip } from "@usva-ui/react/primitives/chip";

<Chip tone="accent" onRemove={() => remove(id)}>Engineering</Chip>

props

proptypedefaultnotes
tone"default" | "accent" | "accent-alt" | "success" | "warning" | "danger""default"the color role. tinted border, fill and text from one token.
size"sm" | "md""md"height and padding. sm for dense rows.
selectedbooleanfalsethe glow-ring pressed look, for chips acting as active filters.
valueReactNode—a trailing segment behind a divider, tabular for counts.
onRemove() => void—when provided, renders the dismiss button.
removeLabelstring"Remove"accessible name for the dismiss button. name the thing being removed.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Chip } from "@usva-ui/react/primitives/chip";

<Chip tone="accent">Design</Chip>
<Chip tone="success" value="v2.1">Release</Chip>
<Chip tone="accent" onRemove={() => remove(id)}>Engineering</Chip>