Search for a command to run...
A styled pill button representing a filter. Inactive reads as a bordered outline; active becomes a filled chip with an inline `[X]` clear, optional leading icon, and the current value(s) after a `|` separator. Atomic primitive — compose with `Popover` / `DropdownMenu` externally for filters that need a picker.
FilterChip is a single styled button. The active surface inlines an optional [X] clear icon, an optional leading icon, the label, and the current values (joined with or, after a | separator). For pickers, wrap the chip inside a <PopoverTrigger asChild> — the trigger merges its props onto the chip's underlying <button>.
FilterChipForwards every <button> HTML attribute. Filter-specific props:
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Required. The chip's display label. |
icon | ReactNode | — | Optional leading icon (e.g. <BellIcon className="size-3.5" />). |
active | boolean | false | false = outlined chip; true = filled chip + values display. |
values | string[] | — | When active, rendered after a | separator in text-info (blue — our "info" status color). Joined with or. |
onClear | () => void | — | When provided and active, renders a leading X icon that clears the filter (stops propagation so the chip doesn't open). |
Compose FilterChip with Popover for filters that need a picker — wrap the chip inside a
<PopoverTrigger asChild>. The chip stays atomic; the picker lives in your PopoverContent.
Pass current selection to values so users see what's applied at a glance — Status | Active or Pending reads instantly without opening the popover.
Wire onClear whenever the user might want to remove a filter without re-opening the picker.
The inline X is the standard table-filter pattern.
Use FilterChip for non-filter actions. The active state implies "this filter is on" — repurposing it for general toggles muddies the meaning.
Stuff long-form content inside the paired Popover. FilterChip popovers are for picking one or
two values — escalate to a Sheet for multi-section editors.