React Button Group - Filter Chips
Filter chips button group with multi-select capability for content filtering
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Filters refine discovery—multi-select enables complex queries. This React component combines shadcn/ui's Button and ButtonGroup components for tag-based filtering with array state management enabling multiple simultaneous selections. Built on Radix UI with variant switching between default (active) and outline (inactive) states and toggle logic handling All state, the pattern delivers filter controls with clear multi-selection indication. Perfect for issue trackers filtering by type and status, e-commerce filtering by categories and attributes, content platforms filtering by tags, or any interface where multiple filter dimensions should narrow results—button groups unify filter options, variant switching shows active filters, All option provides reset.
Pattern created by @haydenbleasel
Installation
npx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-3.jsonnpx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-3.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-3.jsonbunx shadcn@latest add https://www.shadcn.io/registry/button-group-interactive-3.jsonRelated patterns you will also like
Sort Controls
Data ordering controls
View Switcher
Layout mode controls
Checkbox Component
Multi-select controls
Outline Button
Border-style button variant
Badge Component
Filter indicators
Multi-Select Combobox
Searchable multi-select