Data toolbar
The strip above a table: search, filter chips, view options. The user’s control over what they’re looking at.
Default
Search · filter chips · count · view options. The order matters: most-used controls on the left.
Showing 1–12 of 2,418
With selected filters
Active filters appear as removable chips below the toolbar.
Showing 1–10 of 318
Filters:
With bulk actions
When rows are selected, the toolbar swaps for bulk actions and shows the selected count.
8 students selected
·
Anatomy
| Property | Value | Notes |
|---|---|---|
| height | 52 px | — |
| search | 280 px max | Left-most control |
| count | --type-caption muted | Right-aligned |
| bulk variant | --ink bg | Replaces toolbar entirely while selection exists |
Do & don't
Do
Show selected filters as chips below the toolbar. The user should always see what’s applied.
Don't
Hide filters inside a "More" menu. They should be discoverable on the row.
Do
Replace the toolbar entirely when bulk-select is on. Two action bars on top of each other confuses the operator.
Don't
Show row count on the left. The count belongs on the right where it stays out of the way of action.