Content
cellsThe count badge
1 applied
3 applied
12 applied
Filters
React v2Package-backed FilterDropdown and FilterDialog behavior over a caller-controlled row model. FilterBar remains a local layout recipe, not a promoted package component.
Filters
React v2Package-backed FilterDropdown and FilterDialog behavior over a caller-controlled row model. FilterBar remains a local layout recipe, not a promoted package component.
Demo
heroRows in the menu*
appliedCount*
surface*
placement*
import { Calendar, SearchLg } from "@untitledui/icons";
import { Button } from "@/components/base/buttons/button";
import { FilterBar } from "@/components/application/filter-bar/filter-bar";
import { FilterDropdown } from "@parentsquare/squarekit-react-v2/filters";
<FilterBar.Root>
<FilterBar.Content>
<Button size="sm" color="secondary" iconLeading={Calendar}>
Last 30 days
</Button>
</FilterBar.Content>
<FilterBar.Actions>
<FilterBar.FilterIconButton icon={SearchLg} label="Search orders" />
<FilterDropdown
filters={filters}
appliedCount={3}
onApply={(next) => setApplied(next.length)}
onAddFilter={addRow}
onRemoveFilter={removeRow}
onFilterChange={patchRow}
onClearAll={clearAll}
renderFilterRow={(filter, onChange) => (
<FieldOperatorValueInputs filter={filter} onChange={onChange} />
)}
/>
</FilterBar.Actions>
</FilterBar.Root>
In context
in-contextFamily
familyFilterBar.FilterIconButton
FilterDropdown
No filters applied
Add filters to narrow down results.
3 applied
Types
cellsAll eight bars the sheet draws, in canvas order.
The bar
Status*
Category*
Sort by*
Value
The trigger
the default, nothing applied
appliedCount 2: the tint and the badge
children: a More filters trigger
children: the icon-only trigger
The icon button
icon SearchLg, label Search orders
icon Calendar, label Pick a date range
Layouts
cellsThe menu
No filters applied
Add filters to narrow down results.
Value
The slideout
The row
Value
Value
count 1
count 3
count 12: the box grows with the digits
Behaviour
cellsStates
cellsisDisabled on the trigger
isDisabled on the icon button