ExperimentalatomInputs

FilterChip

A filter pill people switch on and off, with an optional count.

import { … } from "@brdgapp/ui/components/filter-chip"

Usage

FilterChip is a bordered pill people turn on and off to narrow what they see: All / To do / Updates on Activity, or sources in a drawer. It can show a count. The usual mistake is using it as a label: a chip you can't press is a Tag.

When to use

A short row of filters above a list.
One-of-many (All / To do / Updates) or several-at-once (Email, Calendar, LinkedIn). The parent decides.

When not to use

For a status or category label. Use Tag instead.
For modes of one view. Use SegmentedControl instead.
For a filter with many choices. Use a filter menu (FilterPill).

Labels are boxes, controls are pills

Tags and badges have 4px corners and never become pills. Pills (rounded-full) are for things you press: buttons, filter chips, search fields, segmented controls.

Counts match what's shown

A number on screen comes from the same filtered list that renders the items, never from a separate count that can disagree. Never show a silent 0 when a count failed to load.

Anatomy

Pill. 1px border, 13px SemiBold label.
Count. Optional, after the label, muted, with even-width digits.

Examples

One at a time

Activity's All / To do / Updates.

Several at once

Source filters that combine.

States

	Rest	Hover	Focus	Disabled
Off
On

State	What happens
Off	Clear fill, `--text-disabled` border.
On	`--surface-tertiary` fill, darker border, `--text-primary` label.
Hover	Border and label darken.
Focus visible	2px blue ring.
Disabled	30% opacity and no pointer events.

Behavior

Built on Base UI Toggle: it reports aria-pressed, so screen readers say on or off.
Controlled: you pass active and handle onClick.

Do and don't

Wrap a row of chips in a group with an aria-label ("Show", "Sources").

Don't

Leave a row of chips with no name for what they filter.

Content

One or two words, sentence case. Counts are numbers only: "All 8", not "All (8 items)".

Accessibility

The count is part of the chip's name, so "To do 3" is read as one control.

Keys	Action
`EnterSpace`	Turn the chip on or off.

API reference