Filter chip

A toggleable filter, used in horizontal rows above search results and on category pages.

Usage#

Chips are AND filters, not OR pills. Tapping two chips narrows results. Make that obvious with an inline result count when scope permits.
Active is ink, not teal. Active chips use ink-on-sand so they don't compete with the single teal primary action on the page.
Keep labels tight. One to three words. “Organic cotton”, “Family-owned”, “Workshop made”.
Order matters. Most common first, alphabetical second. Never “surprise me” random.

Props#

Name	Type	Default	Description
active	boolean	false	Whether the filter is currently applied.
onToggle	(next: boolean) => void	—	Called when the user toggles the chip.
count	number	—	Optional count rendered in monospace at the right.
children*	ReactNode	—	Filter label.

Code#

tsx

import { FilterChip } from "@/components/ui/FilterChip";

<FilterChip>Organic cotton</FilterChip>
<FilterChip active>Japanese denim</FilterChip>
<FilterChip count={124}>Workshop made</FilterChip>

// Controlled
const [active, setActive] = useState(false);
<FilterChip active={active} onToggle={setActive}>Family-owned</FilterChip>