Toolbar
Search the component library

Toolbar

v1.0.0-beta.1
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

Dependencies

None

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.

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

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.

Drawer features

The drawer has a few features that help replicate the functionality of more advanced controls. These include:

Drill down menus

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.

State icons

For controls which represent a binary such as locked/unlocked an icon may be included to indicate the current state.

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.

Notes:

  • The select all component may need to become optional on mobile for space reasons, this matches the typical iOS convention at least
  • Do we need a nested dropdown for collapsing actions?
  • Showing action only upon selection… what if all items in the toolbar are actions? Give a message prompting to select? <– testing candidate

Changelog

1.0.0-beta.1

Initial version