Filter button

FilterButton is a pill-shaped dropdown trigger that opens a single-select list. Switches to an active (brand) style when a value is selected. Click a selected item again to clear.

Use it for

• Single-axis dropdown filters inside a FilterBar
• Categorical filters with 3–15 options (longer lists belong in a Select with search)
• Filters that should show a clear "active vs not" state visually

For boolean on/off filters, use FilterToggle instead.

Import

import { FilterButton } from '@brikdesigns/bds';

Variants

Default

const [category, setCategory] = useState<string | undefined>();

<FilterButton
  label="Category"
  value={category}
  onChange={setCategory}
  options={[
    { id: 'design', label: 'Brand design' },
    { id: 'marketing', label: 'Marketing' },
  ]}
/>

With icons

Each option can include an icon for visual reinforcement.

<FilterButton
  label="Category"
  value={category}
  onChange={setCategory}
  options={[
    { id: 'design', label: 'Brand design', icon: <CrownIcon /> },
    { id: 'marketing', label: 'Marketing', icon: <BullhornIcon /> },
  ]}
/>

Sizes

Three sizes — sm, md (default), lg. Match the size of surrounding controls.

Active state

When value is set, the button switches to the brand-active style. Click the active option in the dropdown again to clear (the onChange callback receives undefined).

When not to use

• Don't use for boolean filters. Use FilterToggle — it has the right semantics and shape.
• Don't use for multi-select. This component is single-select only. For multi-select, use a checkbox menu inside a Popover or a MultiSelect.

Accessibility

• The trigger is a real <button>. Keyboard Enter/Space opens the dropdown.
• Active state is announced via aria-pressed.
• Selected option in the dropdown carries aria-selected="true".

API

FilterButton

FilterButtonOption

interface FilterButtonOption {
  id: string;
  label: string;
  icon?: ReactNode;
}

Related

• FilterBar — the parent container
• FilterToggle — boolean alternative
• Storybook playground