Inputs
Filter chip
An on/off pill that narrows a list: ink when on, a quiet surface when off, with aria-pressed. A row of them filters; one choice of a few that always has one is a segmented control.
Live example
Import
Each family is its own entry point, so a page loads only what it uses.
tsx
import { FilterChip } from "@nibapp/ui/components/filter-chip";Props
Each component's own props and variants, read from its source. What it also takes from an element or a Base UI part is named below its table.
FilterChip
One filter of a list ("All", "Skills", a provider) as an on/off pill: `aria-pressed`, ink when on. A row of them narrows a list; one choice of a few that always has one is a SegmentedControl.
| Prop | Type | Default | Description |
|---|---|---|---|
| size | "sm" | "md" | "md" |
|
| leading | ReactNode | — | Icon or logo before the label. |
Also takes .