Filter Bar

Horizontal filter bar with single/multi-select and count badges

Basic Usage

Default variant

Pills variant with icons

Multi-select

pnpm add @corew500/ui

import { FilterBar } from "@corew500/ui/filter-bar"

<FilterBar>Content</FilterBar>

Axis	Values	Default
`spacing`	smdefaultlg	default

Axis	Values	Default
`variant`	defaultpillsoutline	default
`size`	smdefaultlg	default

Prop	Type	Default	Description
`filters*`	FilterOption<T>[]	—	Filter options to display
`showAll`	enum	`true`	Whether to show the "All" option
`allLabel`	string	`All`	Label for the "All" option
`showCounts`	enum	`false`	Whether to show count badges
`variant`	enum	`default`	Visual variant for filter items
`size`	enum	`default`	Size of filter items
`spacing`	enum	`default`	Spacing between filter items
`ariaLabel`	string	`Filters`	Accessible label for the toolbar
`className`	string	—	Additional CSS classes
`multiple`	enum	`false`	Enable multi-select mode
`value*`	enum	—	Currently selected filter values Currently selected filter value
`onChange*`	enum	—	Callback when selection changes

Keyboard: Tab to enter, arrow keys to navigate (TODO: implement roving tabindex)
Focus visible rings for keyboard navigation