Content
- Options are short nouns, sentence case.
ExperimentalmoleculeInputs
FilterPill
A pill that opens a single-choice filter menu, for table toolbars.
import { … } from "@brdgapp/ui/components/filter-pill"Usage
FilterPill is a pill that opens a short single-choice menu, for the right end of a table toolbar: search on the left, filters on the right. The first option is the resting "All" state; choosing anything else fills the pill, so an active filter is visible at a glance. The usual mistake is a filter that's on but looks off.
When to use
- One filter with three to ten choices above a table or list: degree, status, category.
When not to use
- For two to four always-visible choices. Use FilterChip instead.
- For a filter that belongs to one column. Use ColumnFilterMenu instead.
- For actions. Use ActionMenu instead.
Anatomy
Pill. Shows the current choice and a chevron. Filled when not "All".
Menu. At least 200px wide, aligned to the pill's right edge. The chosen option is bold with a blue check.
Examples
In a table toolbar
Search on the left, filter on the right.
States
| Rest | Hover | Focus | |
|---|---|---|---|
| Resting | |||
| Active |
| State | What happens |
|---|---|
| Resting | Clear pill, muted label: the first option is chosen. |
| Active | Filled pill, dark label: another option is chosen. |
| Open | Chevron flips. |
Behavior
- Built on Base UI Menu with radio items: screen readers hear which option is chosen.
- Choosing closes the menu and calls
onChange. Filter on the server so pagination stays correct.
Do and don't
Do
Make the first option say what "no filter" means: "All degrees".Don't
Leave the resting label as just "Filter".Accessibility
- The trigger reads as "Degree: 1st degree" — pass
ariaLabelnaming what is filtered.
| Keys | Action |
|---|---|
| EnterSpace↓ | Open. |
| ↑↓ | Move between options. |
| Enter | Choose. |
| Esc | Close without changing. |
API reference
FilterPill
The pill and its menu.
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The chosen option. |
options | { value, label }[] | — | The first is the resting "All" state. |
onChange | (value) => void | — | Called with the new choice. |
ariaLabel | string | "Filter" | What is being filtered. |
className | string | — | Layout only. |
…other attributes | id, aria-*, data-*, event handlers | — | Passed to the button. The component's own props win where they overlap. |
Lineage
What it's built from and where it's used, read from the code. When you change it, check these too.
- Built from
- Bottom sheet
- Used by components
- ColumnFilterMenu
- Used in patterns
- Search, filter and sort
- Used in templates
- Table page
Known gaps
Where the code still differs from the system. Follow the system, not the gap.
- Bridge OS's DegreeFilterPill is a separate copy of the same pattern. It can become a FilterPill with three options.
Sources
- Bridge OS
components.md→ FilterPill, DegreeFilterPill;src/components/ui/filter-pill.tsx.