Skip to main content
This guide covers changes to the beta FilterBar component. These APIs may continue to evolve before the stable release.

​
Overview

Three changes ship together:
  1. The overflow prop is removed. FilterBar always wraps.
  2. The breakpoint that collapses filters into drawer-only mode shifts from 768px to 640px.
  3. A new disableCollapse prop keeps filters inline at every container width.

​
Migration Guide

​
Drop the overflow prop

// Before
<FilterBar
  associatedContent="invoices"
  filters={filters}
  onFilterChange={setFilters}
  overflow="collapse"
/>

// After
<FilterBar
  associatedContent="invoices"
  filters={filters}
  onFilterChange={setFilters}
/>
Filters that don’t fit on a single line now wrap to the next line. Previously, overflow="collapse" hid filters that didn’t fit; that behavior is removed. Configure any filter that should stay out of the toolbar with drawerOnly: true instead.

​
Breakpoint shift

Filters now stay inline down to a 640px container width (previously 768px). If your layout relied on filters collapsing at the higher breakpoint, you may need to adjust container sizing.

​
Opt out of breakpoint collapse

<FilterBar
  associatedContent="invoices"
  filters={filters}
  onFilterChange={setFilters}
  disableCollapse
/>
When disableCollapse is true, filters render inline at every container width. The drawer trigger still appears if any filter is configured as drawerOnly.
Last modified on May 19, 2026