Chip

Props

Usage

<Chip>typescript</Chip>
<Chip active>react</Chip>

Dense by construction

The chip is built to survive tight rows: it never wraps, it never shrinks, and it trims the leading above the capitals so the text sits optically centred instead of floating on its line box. Text is rendered lowercase by the component, which keeps a row of tags even regardless of how the data was capitalised.

<div className="flex flex-wrap gap-2">
  <List array={tags} itemExtractor={({ row }) => <Chip key={row}>{row}</Chip>} />
</div>

Spacing between chips belongs to the container, not to the chip — a chip with a margin of its own would be wrong in every layout but the one it was tuned for.

The lowercase is a default and not a constraint: content that carries its own casing — a country code, a currency, a proper noun — says so with a className.

<Chip className="normal-case">{country}</Chip>

<Chip className="uppercase">{currency}</Chip>

Active

active inverts the chip, painting it in the foreground colour. The contrast is deliberately strong: a chip is small, and a subtler distinction would be lost at that size.

It is a visual state and nothing more. When the chip is a filter, render it as a button and say so with aria-pressed; otherwise the change is invisible to anyone not looking at the screen.

<Chip as="button" active={selected === tag} onClick={() => setSelected(tag)} aria-pressed={selected === tag}>
  {tag}
</Chip>

Chip or Button

They overlap by sight, not by role. A Button is a control: it does something, it takes focus, it reveals a label. A Chip is a piece of information about something else — a tag, a count, a status — and defaults to a div precisely because most chips are not interactive. Reach for a Chip when the thing is a fact, and for a Button when it is an action.