Filter toggle

FilterToggle is a pill-shaped button that flips a single boolean filter on or off. Switches to the active (brand) style when on. Use it for filters that don't need a dropdown — "Show archived," "Only mine," "Has membership plan."

Use it for

• Boolean filters inside a FilterBar
• Filters that don't need a value picker (just "applied vs not applied")
• Quick toggles where the filter name itself describes the criterion

For filters with 3+ options, use FilterButton.

Import

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

Variants

Default

const [showArchived, setShowArchived] = useState(false);

<FilterToggle
  label="Show archived"
  active={showArchived}
  onToggle={() => setShowArchived((v) => !v)}
/>

Sizes

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

Active state

The active prop drives the brand-active style. The component is fully controlled — clicking calls onToggle, and the parent decides what to do (typically flip a state boolean).

When not to use

• Don't use for filters with 3+ options. Use FilterButton.
• Don't use as a primary action. It's a filter control — the visual treatment is intentionally lighter than a real button. For "apply" or "save," use Button.

Accessibility

• Renders a <button> with aria-pressed reflecting the active state.
• Keyboard Enter/Space toggles, just like a regular button.
• The label is the accessible name.

API

FilterToggle

Plus all standard <button> HTML attributes (excluding onChange).

Related

• FilterBar — the parent container
• FilterButton — multi-option alternative
• Switch — for non-filter boolean toggles (settings, preferences)
• Storybook playground