Toolbar
Search the component library

Toolbar

v1.0.0
Download UI Kit v2.1.0

A toolbar contains common tools for operating on a collection of items. Use this component for any collection of items that users can edit or modify, such as, tables, lists, grid view, etc.

Download UI Kit v2.1.0

Standard toolbar

The standard 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.

Positioning 

In general, try to anchor your toolbar with items on either end, or center every item.

Spacing

Group related options 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

Position icons 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.

Elements

Toolbars can contain any controls which pertain to editing, filtering, or modifying the related collection of items. Common elements include the following:

Buttons

Standard buttons represent simple actions which can be applied to either the full collection or just selected items.

Icons

Use a textual button for actions, with two common exceptions:

  1. You need to save space in a responsive context.
  2. The action controls a binary state (e.g., locked/unlocked, starred/unstarred, etc.) and a visual indicator is desirable.

In any case, only use icons when commonly recognizable symbols exist for the action.

Inputs

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'll need to include a proper label to ensure accessibility.

Button groups

Use button groups in situations where several actions are closely related or you need to conserve space.

Examples of the commonly used toolbar controls.

Multi-select

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. You can pair it 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.

Responsive

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.

Wrapping controls

If you have a manageable number of controls, simply move them into two or more lines. In this case, fully justify buttons and controls and use 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.

Condensing controls

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.

Icon controls

Try to use controls that describe their actions with text; however, there are cases where you may need to use icons due to space constraints. Use icons only for well recognized actions, like delete, favorite/like, etc.

Redlines

ElementsButtons should be the large size
Prefer 24px icons
Inputs use the basic style and should include labels
Button groups use the same specs as standard buttons, but share a border and have square corners at the joints
SpacingRelated buttons or inputs are 16px away
Distinct groups of buttons or inputs are separated by either a static 28px or a dynamic distance (to support aligned or distributed layouts)
Icons should generally appear in their own logical group
Icons each reside within a 44px square tappable area
Related icons can be immediately adjacent
16px can separate distinct groups of icons

Multi-select

Checkmark onlyThe checkmark-only option uses the Large Default button style with an enclosed check mark
The checkmark should take on a tristate when one or more items of the collection are selected, but not all of the items are selected
With dropdownUses the button group style to add a dropdown to the checkmark button
The horizontal spacing is customized in this case to be 12px (instead of a standard 20px)
Uses standard dropdown with an icon-only trigger
If the currently selected set of the collection matches one of the dropdown options, use the checkmark to indicate this
If the current selection does not match an option, show no checkmark (and no empty space for one)

Changelog

1.0.0

Initial version