Filter Toolbar

Displays active filters as dismissible pills. Includes a clear-all action and slots for additional filter controls like dropdowns.

Status: ActiveRole: AdminDept: Engineering

import { FilterToolbar } from "@aetherstack/patterns"

Installation

terminal

npx aether-ui add filter-toolbar

Import

import.tsx

import { FilterToolbar, FilterPill } from "@aetherstack/patterns"

Usage

filter-toolbar.tsx

import { FilterToolbar } from "@aetherstack/patterns"
import { Button } from "@aetherstack/ui"

const [filters, setFilters] = useState([
  { id: "status", label: "Status: Active", onRemove: () => removeFilter("status") },
  { id: "role",   label: "Role: Admin",   onRemove: () => removeFilter("role") },
])

<FilterToolbar
  activeFilters={filters}
  onClearAll={() => setFilters([])}
>
  <Button variant="outline" size="sm">
    <SlidersHorizontal />
    Filter
  </Button>
</FilterToolbar>

Props

Prop	Type	Default	Description
activeFilters	ActiveFilter[]	[]	List of applied filters. Each needs an id, label, and onRemove handler.
onClearAll	() => void	—	Shown when there are active filters. Clears all at once.
children	ReactNode	—	Additional filter trigger controls rendered before the active filter pills.
className	string	—	Additional classes on the wrapper.

* Required