Composites · Application UI
Index filters
Filter bar for an index: saved-view tabs, search, sort dropdown, and removable applied-filter pills. Pairs with index-table / resource-list.
@byronwade/foundation@byronwade/segmented-control@byronwade/input@byronwade/filter-pill@byronwade/dropdown-menu@byronwade/button@byronwade/utils@phosphor-icons/react
Feature showcase
Installation
Features
4 examples
Default, No Tabs, Search Only, With Applied Filters.
API
Dependencies
| Package | Kind | Description |
|---|---|---|
| @byronwade/foundation | registry | Installed through the byronwade/ui registry. |
| @byronwade/segmented-control | registry | Installed through the byronwade/ui registry. |
| @byronwade/input | registry | Installed through the byronwade/ui registry. |
| @byronwade/filter-pill | registry | Installed through the byronwade/ui registry. |
| @byronwade/dropdown-menu | registry | Installed through the byronwade/ui registry. |
| @byronwade/button | registry | Installed through the byronwade/ui registry. |
| @byronwade/utils | registry | Installed through the byronwade/ui registry. |
| @phosphor-icons/react | npm | Installed from npm. |
Source and related
| File | Path |
|---|---|
| Component | registry/components/index-filters.tsx |
| Default example | content/examples/index-filters/default.tsx |
| No Tabs example | content/examples/index-filters/no-tabs.tsx |
| Search Only example | content/examples/index-filters/search-only.tsx |
| With Applied Filters example | content/examples/index-filters/with-applied-filters.tsx |