Lucent UI
← FormLayoutSearchFilterBarPricingTable →
✦ LLM-ready

SearchFilterBar

pattern

Compact toolbar recipe for filtering and sorting lists and data tables. Composes the Filter molecule family — FilterSearch, FilterSelect, FilterMultiSelect, and FilterDateRange — into a cohesive bar with conditional clear-all and view toggle.

"Build a SearchFilterBar recipe from lucent-ui. Use a Row composing FilterSearch, FilterSelect, FilterMultiSelect, and FilterDateRange molecules. Add a conditional ghost Clear All button and a SegmentedControl for view toggle."

Usage

React / JSX
import { Row, Button, FilterSearch, FilterSelect, FilterMultiSelect, FilterDateRange, SegmentedControl } from 'lucent-ui'

<SearchFilterBar />

Installation

pnpm add lucent-ui

API Reference

SearchFilterBar props — * required

PropTypeDefaultDescription
Rowcomponent—Horizontal flex container for the toolbar layout.
FilterSearchcomponent—Collapsible search icon that expands to an input on click.
FilterSelectcomponent—Single-select button + menu popover (e.g. Availability, Sort).
FilterMultiSelectcomponent—Multi-select filter with chip count badge in trigger.
FilterDateRangecomponent—Date range button + calendar popover.
SegmentedControlcomponent—View toggle (grid/list) pushed to the right edge.
Button variant="ghost"component—Conditional Clear All button that appears when any filter is active.