Chip

Overview

A chip is one short label inside a pill — a payment method, a dietary restriction, an applied filter. Chips show up in groups, carry a single piece of metadata each, and let the user touch that metadata: see it, remove it, toggle it. We use chip across the system because tag already means a free-text marker the user types into a CMS — the words look the same, the components are not.

Anatomy

Three slots. Optional leading icon, label, optional trailing remove button. Pill shape — radius 9999 px — never a rounded rectangle.

Modes

Three modes, one primitive. The visual delta is small; the semantic delta — interactive vs read-only — is the whole point.

Sizes

Two sizes. md is the default at 36 px tall; smdrops to 28 px for dense surfaces — table cells, packed metadata rows, places where the row height already dictates the chip's size.

States

The selectable mode carries the system's only chromatic state for chips: off (overlay-light) and on (pure-black surface, white label, leading check glyph). Hover lifts the off surface slightly; focus shows a 2 px ring in border.selected.

Leading icon

A 16 px Material outlined glyph anchors a chip when the row carries icon-and-label rhythm — order categories, channel filters, item types. The icon never replaces the label; chips are read by word first, glyph second.

Applied filters

The most common composition in the product: a row of removable chips that name the user's currently-applied filters, with a “Clear all” affordance to drop them in one move. Each chip removes itself; the surrounding rail rewraps.

Behavior

• 01Chips travel in groups. A single chip on a page is almost always a sign you wanted a Badge or a Status pill. The chip earns its place when there are two or more — a filter rail, a tag list, a multi-select.
• 02Wrap, don't scroll. The group rail wraps onto multiple lines with an 8 px gap. Horizontal scrolling for chips is forbidden — the user can't see what they've applied without dragging.
• 03Removal is reversible. When a chip's removal is destructive (drops a setting, cancels a recipient), pair the rail with an undo affordance — either a Toast on remove or a Clear-all-then-undo pattern. Don't make the user re-find what they had.
• 04Selectable chips are multi-select by default. Use a Choice list (radio cards) when the answer is exactly one. Use a Segmented control when the choice is one-of-three. Reach for selectable chips when the user can hold zero or many at once.
• 05Truncation is forbidden. Chips never text-overflow: ellipsis. If a label doesn't fit, the label is too long for the component — rename it or promote the row to a List item.

Accessibility

• Roles: selectable chips render as role="button" with aria-pressed tracking the on / off state. Default chips have no role — they're plain text. Removable chips delegate the interactive role to the inner remove button so the chip itself stays read-only and the close affordance is the focus target.
• Keyboard: Space / Enter toggle a selectable chip; Tab moves between chips inside a group, then onto the remove button if present. Backspace / Delete on a focused removable chip is wired through to onRemove.
• Group label: wrap chips in a ChipGroup with an aria-labelthat names what the group represents (“Applied filters”, “Allergens”). Screen readers announce the label once and step through each chip in DOM order.
• Remove labels: the close button gets its own aria-label — “Remove Vegan”, not just “Remove” — so voice users can target it by name.
• Contrast: the off surface gives text.primary a 17 : 1 contrast on white. The on surface flips to inverse —#0f0f0f with text.inverse at 21 : 1.
• Touch targets: the chip itself is 36 px tall (28 px on size="sm"); the remove button is 20 × 20 px, but the entire chip can also be focused and dismissed with Backspace, so reaching for the small close glyph is never the only path.

Code

The component composes from a single Chip primitive plus a ChipGroup wrapper for layout + group labelling.

import { Chip, ChipGroup } from "@flatpay-dk/ui";
import RestaurantIcon from "@mui/icons-material/RestaurantOutlined";

// Default — static label
<Chip label="Visa" />

// Removable — applied filters / tag editor
<ChipGroup ariaLabel="Applied filters">
  {filters.map((f) => (
    <Chip
      key={f.id}
      label={f.label}
      mode="removable"
      onRemove={() => dropFilter(f.id)}
    />
  ))}
</ChipGroup>

// Selectable — multi-select rail
const [active, setActive] = useState<Set<string>>(new Set());

<ChipGroup ariaLabel="Filter by allergen">
  {ALLERGENS.map((a) => (
    <Chip
      key={a.id}
      label={a.label}
      mode="selectable"
      selected={active.has(a.id)}
      onSelectChange={(next) => {
        setActive((prev) => {
          const out = new Set(prev);
          next ? out.add(a.id) : out.delete(a.id);
          return out;
        });
      }}
    />
  ))}
</ChipGroup>

// Leading icon — when the row carries icon-and-label rhythm
<Chip label="Food" leadingIcon={RestaurantIcon} />

// Dense — sm size for table cells / packed metadata
<Chip size="sm" label="Vegan" mode="selectable" selected />

Best practices

Chips fail loudly when they're used as a substitute for a Badge, a Button, or a List item. The questions below catch the most common mistakes.

Props

Chip

ChipGroup

Related