Chip

Plandialog.tsxsettings.cssREADME.md

Plan, search, build anything

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

function Context() {
  const [plan, setPlan] = useState(true);
  const [files, setFiles] = useState(["dialog.tsx", "settings.css", "README.md"]);
  return (
    <>
      {plan && (
        <Chip
          tone="plan"
          icon="plan"
          onRemove={() => setPlan(false)}
          removeLabel="Exit Plan mode"
        >
          Plan
        </Chip>
      )}
      {files.map((f) => (
        <Chip key={f} icon="file-code" onRemove={() => setFiles(files.filter((x) => x !== f))}>
          {f}
        </Chip>
      ))}
    </>
  );
}

TSX

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. Its icon sits beside the label, framed and stroked by the label's text.

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.

Examples

Tones

The same tones as Badge. A mode chip takes its mode's tone (plan, ask, debug); a context chip stays neutral, or muted once it no longer applies.

NeutralMutedPlanAskDebugToo large

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

<Chip icon="file-code">Neutral</Chip>
<Chip tone="muted" icon="file">Muted</Chip>
<Chip tone="plan" icon="plan">Plan</Chip>
<Chip tone="ask" icon="ask">Ask</Chip>
<Chip tone="debug" icon="debug">Debug</Chip>
<Chip tone="danger" icon="alert">Too large</Chip>

Interactive

Make the whole chip a button with render, but only when it has no onRemove: a button can't hold another button.

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

<Chip icon="paperclip" render={<button type="button" onClick={open} />}>
  screenshot.png
</Chip>

Beside standalone icon buttons, weight="medium" sets the label at 500 and its glyph at the medium stem, 1.35px at 13px, so one toolbar strokes within 0.15px of the buttons' 1.5px.

import { useState } from "react";
import { Chip, IconButton } from "@arcadia/ui";

function InToolbar() {
  const [on, setOn] = useState(true);
  return (
    <>
      <IconButton icon="plus" label="Add context" variant="secondary" shape="pill" />
      <Chip icon="multitask" tone={on ? "neutral" : "muted"} weight="medium" render={<button type="button" onClick={() => setOn(!on)} />}
        aria-pressed={on}>Multitask</Chip>
      <IconButton icon="mic" label="Dictate" variant="ghost" tone="muted" shape="pill" />
    </>
  );
}

Tone and kindShow interaction states

LabelIconRemovableNeutral

neutral

Plan

Muted

muted

Plan

Accent

accent

Plan

Success

success

Plan

Warning

warning

Plan

Danger

danger

Plan

plan

Plan

Ask

ask

Plan

Debug

debug

Plan

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.

TSX

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>

--chip-bg: PaintDefault var(--fill-3); Fill (the tone's wash).
--chip-fg: PaintDefault var(--text-2); Label colour, and the remove button's.
--chip-icon: PaintDefault var(--icon-2); Leading glyph colour.
--chip-max-w: Ref<Measure>Default 240px; Width past which the label fades.

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.

tone: "neutral" | "muted" | "accent" | "success" | "warning" | "danger" | "plan" | "ask" | "debug"Default "neutral"; Shared by Badge and Chip. Mode tones (plan / ask / debug) tint at --mode-soft-strength.
icon: IconName
weight: "regular" | "medium"Default "regular"
onRemove: () => void; Renders a trailing remove button (a 16px IconButton, "x", in the chip colour).
removeLabel: stringDefault "Remove"; The remove button's label and tooltip.
removeHint: ReactNode; Extra tooltip line for the remove button, e.g. the shortcut's effect.
rootStyle: ChipStyle; Typed StyleX override: where the chip sits and its --chip-* knobs.
className: string; A product's hook class, retiring: new code uses rootStyle (ui.lint kit-classname counts the rest).

Rest props go to <span> props and render.

Usage

Examples

Tones

Interactive

In a toolbar

Matrix

Customising

Accessibility

API reference

Chip