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

​
Overview

Toolbar.Filters has been removed as a compound sub-component of Toolbar. Use the standalone FilterBar component instead.

​
Design Rationale

​
Why separate FilterBar from Toolbar?

Previously, filters were tightly coupled to Toolbar as Toolbar.Filters, requiring a wrapping <Toolbar> even when no toolbar actions were needed. This coupling:
  • Forced filters to inherit Toolbar’s size and overflow settings
  • Prevented filters and toolbars from evolving independently
  • Required a parent Toolbar for filters to function
The standalone FilterBar has its own role="toolbar", keyboard navigation, and size/overflow props. When used alongside a Toolbar, compose them as siblings via Flex layout. Standard ARIA patterns handle keyboard traversal — Tab moves between the two toolbars, arrow keys navigate within each.

​
Migration Guide

​
Standalone filters (no toolbar actions)

// Before
<Toolbar associatedContent="invoices">
  <Toolbar.Filters
    filters={filters}
    onFilterChange={setFilters}
  />
</Toolbar>

// After
<FilterBar
  associatedContent="invoices"
  filters={filters}
  onFilterChange={setFilters}
/>

​
Filters with toolbar actions

// Before
<Toolbar associatedContent="invoices">
  <Toolbar.Filters
    filters={filters}
    onFilterChange={setFilters}
  />
  <Toolbar.ControlGroup>
    <Toolbar.Button icon={SaveIcon} aria-label="Save" />
  </Toolbar.ControlGroup>
</Toolbar>

// After
<Flex alignItems="center" justifyContent="space-between">
  <Toolbar associatedContent="invoice actions">
    <Toolbar.Button icon={SaveIcon} aria-label="Save" />
  </Toolbar>
  <FilterBar
    associatedContent="invoices"
    filters={filters}
    onFilterChange={setFilters}
  />
</Flex>

​
Import changes

// Before
import { Toolbar, type Filter } from "@servicetitan/anvil2/beta";

// After
import { FilterBar, Toolbar, type Filter } from "@servicetitan/anvil2/beta";

​
New required prop: associatedContent

FilterBar requires an associatedContent string prop for accessibility. It populates the aria-label on the filter bar’s role="toolbar" element. 
<FilterBar
  associatedContent="invoices" // Required -- describes what this filter bar filters
  filters={filters}
  onFilterChange={setFilters}
/>

​
Optional new props

FilterBar accepts size and overflow props that were previously inherited from the parent Toolbar: 
<FilterBar
  associatedContent="invoices"
  filters={filters}
  onFilterChange={setFilters}
  size="small" // Default: "medium"
  overflow="collapse" // Default: "wrap"
/>

​
Breaking Changes

These changes require code updates before upgrading. The previous API is no longer supported.
  • Toolbar.Filters has been removed — Use the standalone FilterBar component instead.
  • FilterBar requires a new associatedContent prop (string) for accessibility.
  • Filter types (Filter, BooleanFilter, etc.) are now exported from FilterBar, not Toolbar.

​
Why Breaking?

As a beta API, Toolbar.Filters was removed directly without a deprecation path. The standalone FilterBar provides a clearer API surface and independent evolution path for both components.
Last modified on April 24, 2026