Skip to content
Nexus Application Design nadesign

FilterChips

<FilterChips> is the pill-style filter row — [Status: Open ×] [Owner: me, alice ×] + Filter. Lives in the left slot of ContentToolbar. Replaces button-rows-as-filters and dropdown-first menus.

import from "@na/ui/components/FilterChips" ▶ Open in Storybook packages/ui/src/components/FilterChips.tsx

When to use

  • List / table page filter bars.
  • Anywhere the user has applied 1+ filters and needs to see and remove each.

Don’t use FilterChips for: search inputs (use Input type="search"), permanent navigation (use the sidebar), or single-toggle filters (use SegmentedControl).

Default

 
<FilterChips
  chips={[
    { id: 'status', label: 'Status', value: 'Open', onRemove: clearStatus },
    { id: 'owner', label: 'Owner', value: 'me, alice', onRemove: clearOwner },
  ]}
  onAddFilter={openAttributePicker}
/>

API

FilterChips

Prop Type Default Description
chips * FilterChip[] — Currently applied filter chips. AND semantics.
onAddFilter () => void — Fires when the user clicks the "+ Filter" button — open your attribute picker.
addLabel string "Filter" Label on the add button.
hideAddButton boolean false Hide the add button — use when the picker lives elsewhere.

FilterChip

Prop Type Default Description
id * string — Stable id used for keying and removal.
label * string — Attribute label (e.g. "Status").
value * ReactNode — Current value display.
icon ComponentType — Optional leading icon (attribute type).
onEdit () => void — Fires when the chip body is clicked — open the picker to edit.
onRemove () => void — Fires when the × is clicked — remove the filter.
drafted boolean false Mark the chip as still-being-edited (no value yet) — dashed muted outline.

Design guidelines

✓ Do

  • Combine chips with AND. For OR semantics, save a separate named view.
  • Use drafted={true} after an attribute is picked but before the value is selected — signals "choose a value".
  • Pair with a search Input + a sort SegmentedControl in the same ContentToolbar to cover the full filter surface.

✗ Don't

  • Mix FilterChips with a separate "Apply filters" button. Chips apply on selection.
  • Stack 8+ chips. Past that, the user has lost the plot; consider saved views.

Accessibility

  • Each chip body is a <button> (when onEdit is set) — keyboard reachable.
  • The × is a separate <button aria-label="Remove <label>: <value>"> — screen readers announce what’s being removed.
  • The ”+ Filter” button is a real <Button> — keyboard activatable.

▶ Open FilterChips stories in Storybook