ListToolbar

Responsive toolbar with search, filters, and actions for list views

Overview

ListToolbar provides a standardized toolbar layout for list views with a flexible search input, filter controls, and action buttons. The search input fills available space while filters and actions remain fixed width. On mobile, the layout stacks vertically.

Key Features

Flexible search input that fills available space
Slot for filter components (Select, GroupedMultiSelect, etc.)
Slot for action buttons (Export, Column toggle, etc.)
Responsive layout: horizontal on desktop, stacked on mobile
Loading state support with disabled inputs
Optional empty state visibility

Interactive Examples

Search Only

Search value: Empty

Search + Filters

Search: Empty

Filters: None

Full Toolbar (Search + Filters + Actions)

Search: Empty

Filters: None

Loading: false

Loading State

Props Reference

Prop	Type	Default	Description
`search`	`ListToolbarSearchConfig`	`-`	Search input configuration with value, onChange, placeholder, and disabled options
`filters`	`ReactNode`	`-`	Filter controls to render (Select, GroupedMultiSelect, etc.)
`actions`	`ReactNode`	`-`	Action buttons to render at the end of the toolbar
`showEmpty`	`boolean`	`false`	Show toolbar even when all slots are empty
`className`	`string`	`-`	Additional CSS classes for the toolbar container
`isLoading`	`boolean`	`false`	Loading state that disables all inputs

Usage

import { ListToolbar, GroupedMultiSelect } from '@/ui/components';
import { Button } from '@/ui/primitives';

// Basic search only
<ListToolbar
  search={{
    value: searchQuery,
    onChange: setSearchQuery,
    placeholder: "Search items...",
  }}
/>

// With filters
<ListToolbar
  search={{ value, onChange, placeholder }}
  filters={
    <GroupedMultiSelect
      groups={traitGroups}
      selected={selectedTraits}
      onChange={setSelectedTraits}
      placeholder="Filter by traits..."
    />
  }
/>

// Full toolbar with actions
<ListToolbar
  search={{ value, onChange, placeholder }}
  filters={<Select>...</Select>}
  actions={
    <>
      <Button variant="outline" size="sm">Export</Button>
      <Button variant="outline" size="sm">Columns</Button>
    </>
  }
  isLoading={isLoading}
/>

Prop

Type

Default

Description

search

ListToolbarSearchConfig

-

Search input configuration with value, onChange, placeholder, and disabled options

filters

ReactNode

-

Filter controls to render (Select, GroupedMultiSelect, etc.)

actions

ReactNode

-

Action buttons to render at the end of the toolbar

showEmpty

boolean

false

Show toolbar even when all slots are empty

className

string

-

Additional CSS classes for the toolbar container

isLoading

boolean

false

Loading state that disables all inputs

import { ListToolbar, GroupedMultiSelect } from '@/ui/components'; import { Button } from '@/ui/primitives'; // Basic search only <ListToolbar search={{ value: searchQuery, onChange: setSearchQuery, placeholder: "Search items...", }} /> // With filters <ListToolbar search={{ value, onChange, placeholder }} filters={ <GroupedMultiSelect groups={traitGroups} selected={selectedTraits} onChange={setSelectedTraits} placeholder="Filter by traits..." /> } /> // Full toolbar with actions <ListToolbar search={{ value, onChange, placeholder }} filters={<Select>...</Select>} actions={ <> <Button variant="outline" size="sm">Export</Button> <Button variant="outline" size="sm">Columns</Button> </> } isLoading={isLoading} />