Chip
Compact interactive tokens for filtering, tagging, and quick actions. Three distinct variants — filter, input, and suggestion — each with a specific job.
Filter chips
Toggle on/off to narrow a content set. Multiple chips can be selected simultaneously. A leading check icon confirms selection state without relying on colour alone.
Design and Engineering are selected. All other chips are in their default state.
Input chips
Represent discrete values entered by the user — typically recipients, tags, or categories. Each chip includes a dismiss button to remove the value. They live inside an input field and can be created by pressing Enter or ,.
Suggestion chips
Surface pre-defined quick actions or completions. Unlike filter chips, suggestion chips trigger an action on tap rather than toggling state. They disappear or transform after selection.
Vibe / mood indicator
RecipeA non-interactive chip variant that pairs an emoji with a short label to convey mood, sentiment, or informal status — e.g. how an applicant felt about an interview. Reuses the chip's capsule shape and sizing; the only difference is a leading emoji glyph in place of an icon and a disabled interaction model.
The emoji is decorative (aria-hidden) — the label text carries the meaning, so it must never be omitted in favour of the emoji alone.
Anatomy
Sizes
Small — 28px
Medium — 32px
States
| State | Appearance | Notes |
|---|---|---|
| Default | Design | Resting, unselected |
| Hover | Design | Cursor over chip |
| Selected | Design | Active filter; check icon shown |
| Disabled | Design | 40% opacity, not interactive |
Usage guidelines
- ·Use filter chips to narrow a list or grid of items
- ·Limit chip labels to 1–3 words — they should scan instantly
- ·Show the count of active filters when chips are collapsed
- ·Allow all chips to be deselected (show full unfiltered state)
- ·Use chips for primary navigation or page-level actions
- ·Put more than ~8 chips in a single row without wrapping or overflow
- ·Mix filter and suggestion chips in the same group
- ·Use chips where a checkbox group would be clearer
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label* | string | — | Text content of the chip. |
variant | "filter" | "input" | "suggestion" | "filter" | Controls chip affordance and interaction model. |
selected | boolean | false | Selected state — applies filled style and leading checkmark. |
onDismiss | () => void | — | Renders a × dismiss button when provided. Use for input chips. |
leadingIcon | ReactNode | — | Optional icon or avatar placed before the label. |
disabled | boolean | false | Prevents interaction and reduces opacity to 40%. |
size | "sm" | "md" | "md" | sm is 28px tall; md is 32px tall. |
Accessibility
- →Filter chips use role="checkbox" with aria-checked to communicate toggle state to screen readers.
- →Input chips use role="option" inside a listbox; each dismiss button is a separate focusable element with aria-label="Remove [value]".
- →The chip group should have an accessible name via aria-label or aria-labelledby describing what is being filtered.
- →Selected state must not rely on colour alone — always include the check icon or aria-checked.
- →Keyboard: Space toggles filter chips; Delete or Backspace removes the last input chip when the field is focused.
- →Ensure 3:1 contrast between the chip border and the background in all states.