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.
A toolbar is a series of buttons that enables the user to reach frequently, as well as less frequently, used actions or tools.
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
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.
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.
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:
The buttons contain a label with an icon or lable only.
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 selected
Toolbar button when selected and list object hovered
As the screen width is decreasing, all actions should end up under the More menu.
1 rem = 16 pixels