Data display
FilterBar
Render the shared search-and-filter container. The control center for finding exactly what you need.
Curated demo
Reference
Render the shared search-and-filter container. The control center for finding exactly what you need.
- Use FilterBar as a layout wrapper for extra filtering controls.
- Keep actual filter logic and state in the page. We just provide the stylish bar.
- Great for search inputs combined with a few toggle buttons.
Props
| Name | Type | Default | Description |
|---|---|---|---|
placeholder | string | 'Search or filter...' | Search input placeholder. |
variant | 'default' | 'compact' | 'default' | The visual style of the filter bar. |
class | string | — | Additional CSS classes. |
Example snippet
<FilterBar>
<Button variant="secondary" size="sm">Stable only</Button>
</FilterBar>