FilterBar
Horizontal filter-chip row with an optional trailing clear-all action
Interactive-mode
Examples
Filter bar with active chips
Status: Active
Type: Admin
Filter bar with clear-all action
Region: APAC
Role: Editor
Status: Active
API
The element family below can be composed together. Click an element to jump to its properties.
| Element | Purpose |
|---|---|
| FilterBar | A horizontal filter-chip row. Renders a flex items-center gap-2 flex-wrap container. The Filters slot holds FilterChip chunks or other badge elements; the optional ClearAction slot renders at the trailing end (e.g. a ghost "Clear filters" button). Wire each FilterChip's OnRemove to remove the corresponding filter from state. |
FilterBar
A horizontal filter-chip row. Renders a flex items-center gap-2 flex-wrap container. The Filters slot holds FilterChip chunks or other badge elements; the optional ClearAction slot renders at the trailing end (e.g. a ghost "Clear filters" button). Wire each FilterChip's OnRemove to remove the corresponding filter from state.
| Property | Type | Required | Description |
|---|---|---|---|
| Filters | RenderFragment? | FilterChip elements rendered in a wrapping flex row. | |
| ClearAction | RenderFragment? | Optional trailing slot for a clear-all action. Pinned to the end with ml-auto. |