Filter Bar
Horizontal filter row for Spending and similar browse views. Pairs with FilterPillSelect, FilterPillDateRange, FilterPillAmountRange.
Pills
Typical Spending filter set.
Actions
FilterGroup
Labeled groups for non-pill selects.
With table + skeleton
pills + table + pagination
| Date | Description | Amount |
|---|---|---|
| Jan 12 | Groceries | $82.40 |
| Jan 18 | Fuel | $54.10 |
Showing 1-25 of 120
Page 1 of 5
FilterBarSkeleton
Developer
import { FilterBar, FilterGroup } from "@financial-tracking/design-system"API reference
FilterBar lays out children; FilterGroup labels a nested control. Pill components are separate exports.
| Prop | Type | Default |
|---|---|---|
FilterBar.children | ReactNode | — |
FilterBar.actionsTrailing slot (counts, secondary controls). | ReactNode | — |
FilterBar.className | string | — |
FilterGroup.label | string | — |
FilterGroup.children | ReactNode | — |