Skip to main content

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>