Data table toolbarpattern
Search, filters and the main action above a table.
Patterns- Built from
- Input · Dropdown menu · Button · Table · Badge
- Guidance
- draft · v0.1.0
Examples
Copy the code into a product and change the content – the layout and tokens carry over.
| Screen | Status | Comments |
|---|---|---|
| Home – desktop | In review | 4 |
| Checkout | Signed off | 0 |
| Account settings | Changes requested | 7 |
Guidance
Rules
- Search first, then filters, then view options – all on the left. The main action (Add screen) on the right.
- Filters show their state on the button (Status: 2) and clear in one step.
- Bulk actions replace the toolbar while rows are selected, with a count (3 selected).
- On narrow screens the search takes the full row; filters move to a sheet.