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
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.
For controls which are tightly related, you should use a button group to indicate this.
Icons should be positioned inside a 44px square tap area. For related icons their tap areas may be immediately adjacent (instead of 16px if they were buttons). Use 16px (instead of 28px) for separating logical groups of icons or when the icon is adjacent to a button or input.
Toolbars can contain any controls which pertain to editing, filtering, or modifying the related collection of items. Common elements include the following:
Basic buttons would represent simple actions which could apply to either the full collection or just selected items.
You should generally prefer to use a textual button for actions, with two common exceptions:
In any case, prefer to only use icons when commonly recognizable symbols exist for the action.
In some cases you may need to gather input from a user, like a search field or a select control to filter the collection. You will need to include a proper label to ensure accessibility.
Button groups can be used to in situations where several actions are closely related or you need to conserve space.
Examples of the commonly used toolbar controls.
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.
Potential Enhancement
In some cases you may have too many controls to reasonably fit in a multi-row layout. In this case the UXF team is exploring an overflow menu that would allow you to move the extra tools into a drawer with more room. This is likely to be an addition in version 1.1 of this component, pending feedback from the development team.
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.
Initial version
Toolbar
