Common layout of tools for operating on a collection of items.
Usage Guidelines
Any collection of items that can be editing or modified by the user (e.g. table, list, grid view, etc.) should consider using this component.
Features
Dependencies
None
Documents
The basic toolbar simply provides an area to collect the buttons and inputs that modify your collection of items. For example, you may offer the ability to delete selected items, or filter the collection.
Examples of basic toolbars.
In general, try to anchor your toolbar with items on either end, or center every item.
Related options should always be grouped with 16px between them. Logical groups of controls may be separated further by either a static 28px or a dynamic space which flexes with the size of the container.
In cases where it would be handy to select or deselect either all items or some large subset at once you can include the multiselect button.
This button contains a checkmark which will select/deselect all items in the collection. It may be paired with a dropdown that offers subsets for selection, such as only the TAs from a list of students.
Example of the multiselect, with or without the extra dropdown options.
As the screen width gets smaller you will probably run out of space to include all tools on a single row. There are a couple ways to adapt the design to account for this.
If you have a manageable number of controls, simply moving them into two or more lines is a straightforward solution. In this case buttons and controls should always be fully justified and consume 100% of the available space. Try to avoid placing more than two items per row at the smallest breakpoints, and try to avoid using more than three rows total.
A responsive implementation of the basic table examples from above.
In some cases you may have too many controls to reasonably fit in a multi-row layout. In this case you may combine less important controls under a “More” button which will open a drawer containing the remaining options.
The drawer has a few features that help replicate the functionality of more advanced controls. These include:
These function as a 1:1 replacement for dropdown menus, allowing the user to tap into an item and choose from a list of options.
For controls which represent a binary such as locked/unlocked an icon may be included to indicate the current state.
Controls that describe their actions with text should be strongly preferred, however there are cases where you may need to use icons due to space constraints. Prefer to use icons only for well recognized actions, like delete, favorite/like, etc.
Notes:
Toolbar