Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Button Group examples · Interactive

Filter Chips Button Group for React

Filter buttons in two groups where several filters can be on at once and All clears the rest.

Framework
UI library

A multi-select filter bar. Status filters sit in the first group, types in the second, and any mix can be on. All is the reset: choosing it clears the others, and turning the last filter off falls back to All. Every active filter is filled and announced as pressed.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How are the active filters tracked?

A list of values, starting as all. Each button carries its own value. Pressing one adds it to the list, or removes it when it's already there.

How does All behave?

Pressing All sets the list to just all. Turning on any other filter removes all, and turning off the last one puts all back, so the list is never empty.

How is an active filter shown?

Its button uses variant="default" and sets aria-pressed, while inactive filters use outline.

Do status and type filters combine?

In the demo they share one list, so Active and Bug can both be on. Decide in your query whether that means Active and Bug or Active or Bug.

Does the demo filter anything?

No. It only keeps the list. Read it where you render or fetch the results.

Could this be a Toggle Group?

Yes. A Toggle Group that allows several values handles the pressed state for you. You would still add the All reset yourself.

All 39 button group examples