Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Filter Chips Button Group for Ark UI

Filters for All, Active, Pending, and Completed, plus Bug, Feature, and Enhancement, with several on at once.

Two groups, one list of active filters, starting on All. Status is All, Active, Pending, and Completed. Type is Bug, Feature, and Enhancement. Choosing Bug clears All. Choosing All clears the rest. Turning the last filter off returns to All. No list is filtered.

Use it when filters combine and All means none. One choice per group, with arrow keys, is a Toggle Group. In React, Ark UI does not filter the results.

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

Anatomy

Button Group anatomy: root, group, button, separator

Usage

<div className="flex flex-col gap-4">
  <ButtonGroup aria-label="Status filters">
    {STATUSES.map((item) => (
      <Button
        aria-pressed={filters.includes(item.value)}
        key={item.value}
        onClick={toggleFilter}
        size="sm"
        value={item.value}
        variant={filters.includes(item.value) ? "default" : "outline"}
      >
        {item.label}
      </Button>
    ))}
  </ButtonGroup>
  <ButtonGroup aria-label="Type filters">
    {TYPES.map((item) => (
      <Button
        aria-pressed={filters.includes(item.value)}
        key={item.value}
        onClick={toggleFilter}
        size="sm"
        value={item.value}
        variant={filters.includes(item.value) ? "default" : "outline"}
      >
        {item.label}
      </Button>
    ))}
  </ButtonGroup>
</div>

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.

API Reference

Button Group

Sets aria-label="Status filters" and aria-label="Type filters". The rest is on the Button Group page.

Button

Sets aria-pressed={filters.includes(item.value)}, onClick={toggleFilter}, size="sm", value={item.value} and variant. The rest is on the Button page.

All 39 button group examples