Layout & display

Toolbar

The row of filters and actions above a table or a list. It states one thing the hand-rolled versions of it disagreed about: its children sit on their vertical centers, which is the only arrangement that still looks right when one control is taller than the rest.

Basic

Filters are children. Actions go in the actions snippet and are pushed to the trailing edge. A status filter of three options is a SegmentedControl. With its label it is taller than a bare search box, and both stay centered against the buttons beside them.

Filtering on all. The children are flex items of the toolbar itself rather than of a wrapper, because a wrapper would align its own contents and leave the toolbar aligning one box, which is how a filter row loses the alignment it is here to keep.

Naming the row

label is the accessible name. A page with a filter row above the table and a bulk action row below it has two toolbars, and without names a screen reader announces both as "toolbar" and leaves the user to guess which one they landed in.

Above a table

The row wraps rather than scrolling sideways. A filter row that overflows takes a horizontal scrollbar the user has to find before the last filter can be reached, and on a phone that is every filter row. Narrow this page and watch the badge drop to a second line.

API