Toolbar
Search the component library

Toolbar

v1.0.0
Download UI Kit v1.9.0

Common layout of tools for operating on a collection of items.

Download UI Kit v1.9.0

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

  • Responsive guidelines
  • Standard search and filter controls

Basic toolbar

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.

Positioning guidelines

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

Spacing

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

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.

Toolbar elements

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

Buttons

Basic buttons would represent simple actions which could apply to either the full collection or just selected items.

Icons

You should generally prefer to 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, prefer to 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 will need to include a proper label to ensure accessibility.

Button Groups

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.

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

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

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

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.

Redlines

Elements
  • Buttons 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
Spacing
  • Related 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 Only
  • The 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 Dropdown
  • Uses 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