Chip

import { Chip } from "@arcadia/ui";

<Chip icon="paperclip" onRemove={remove}>
  screenshot.png
</Chip>

A 24px token for what someone put in the composer: the mode chip (Plan), context files and attachments. With onRemove it ends in a 16px remove button in the chip's colour, with its own label and tooltip; remove one above and the rest close up. active draws the icon's filled form, for a chip that stands for a state that is on (a mode chip, a toggle chip that is pressed).

Chip or Badge? A chip is a token someone added and can take away. A Badge only states something, a count, a shortcut or a status, and can't be pressed.

rootStyle takes where the chip sits (margins, self-alignment, flex and grid placement, size bounds) and the knobs below, each a token of its kind. A colour, a raw length or any other property is a type error: a look that comes up twice becomes a variant.

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  // a context chip that no longer applies, pushed to the end of its row
  stale: { "--chip-bg": "var(--fill-5)", marginInlineStart: "auto" },
});

<Chip icon="file" rootStyle={styles.stale}>old-plan.md</Chip>

Tones only reassign the knobs. The remove button takes the chip's text colour, so a tone recolours it too.

The chip itself is a <span>; only its remove button is focusable, named by removeLabel (default "Remove"). Name it after what it removes ("Remove dialog.tsx") when several chips sit together, or every button reads the same.

Removing a chip takes its button out from under focus, so move focus somewhere sensible, such as the composer's text field or the next chip.