Internet Explorer is not supported by Design Library

The last version of Internet Explorer, version 11, was released on October 17, 2013. This is a very long time ago when taking into account the rapid development of web technologies. These days it is often difficult and time consuming to get modern technologies to work well in this old browser. More and more frameworks are dropping support, and even Microsoft themselves has announced that they will fully drop support for IE in their own services in 2021.

Consequently, we have decided to not include support for IE in the Design Library website.

Luckily, there are modern options in active development. Please use Firefox, Edge or Chrome instead.

Toolbar

A toolbar is a series of buttons that enables the user to reach frequently, as well as less frequently, used actions or tools.

Guidelines

Short description

A toolbar allows the user to easily find more or less frequently used actions and tools that modifies, manipulates or in other ways affects the content to which the toolbar belongs. The items in the toolbar may vary based on what the toolbar relates to.

Example of toolbar used in context

Example of toolbar used in context

When and how to use it

When to use it?

Being able to collect actions in a bar is useful when several actions relate to the same component. A toolbar can involve different actions or tools such as Export, Customise or a More menu. The More menu allows the user to choose from a series of actions.

How to use it?

Placement

The toolbar should be placed at the top, horisontally and aligned to the right in relation to the component to which the toolbar belongs. Place the toolbar 8 pixels above the component.

Content

Frequently used actions should be placed to the left in the toolbar. The More menu should always be placed to the right.

Examples of actions and tools that can be used with the toolbar:

  • Actions, such as Export or Customize
  • A More menu (with the least frequently used actions), i.e advanced settings, Advanced export
Icons and labels

The buttons contain a label with an icon or lable only. 

Behaviour

The user has no opportunity to customise the toolbar on their own, however, the tools in the toolbar may vary based on what the toolbar relates to. To clarify, a toolbar can contain different actions because the ability to perform different actions can vary. Sometimes the user may be able to download the contents of a table and sometimes not, in the latter case, a download button may not be relevant.

Toolbar button when user hovers over it

Toolbar button when user hovers over it

Toolbar button when selected

Toolbar button when selected

Toolbar button when selected and listobject hovered

Toolbar button when selected and list object hovered

Mobile version

As the screen width is decreasing, all actions should end up under the More menu.

Do's and don'ts

  • Consider which actions are used most frequently (no more than three) and place them outside the more menu
  • When designing the buttons, assume that a label should be combined with a symbol. Place the symbol to the left and the label to the right. Exceptional cases can be made if the symbol largely speaks for itself.
  • Consider whether a toolbar is actually necessary.
  • Make sure that all actions in the toolbar relate to the same component

 

  • Don't place less frequent actions outside the more menu
  • Don't place anything other than buttons in the toolbar
  • Don't put a search field in a toolbar. Use a search button and label instead. 

Specification

Measurements

Measurements

Measurements

Measurements

Measurements

1 rem = 16 pixels

States

States

States

 

Default state
  • Indicates that the item has not been selected
  • Label: 16 px Medium #333333
  • Default Background: Transparent
Hover state
  • Indicates that the user hovers over the item
  • Label: 16 px Medium #333333
  • Hover background: #FFFFFF
  • Hover gradient: Box shadow: 0 0 12px 0 (10% transparent)
  • Hover radius: 4
Selected state
  • Indicates that the item has been selected
  • Label: 16 px Medium #333333
  • Selected background: #FFFFFF
Opened list normal
  • Indicates that the item is opened
  • Text/label: 16 px Regular #333333
  • Opened background: #FFFFFF
  • Opened gradient: Box shadow: 0 2px 6px 0
  • Opened radius: 4
List object hover
  • Indicates that the list item is hovered
  • Text/label: 16 px Regular #333333
  • Opened background: #E9E9E9
List object focus
  • Indicates that the list item is in focus
  • Text/label: 16 px Regular #333333
  • Opened background: #FFFFFF
  • Gradient 4 px outline in Blue, box-shadow: 0 0 4px 1px in Blue

 

Colours

  • Grey 800
  • Grey 300
  • White

Related patterns & components

Page last updated

Feedback

Was this helpful?