Skip to main content


Toolbar consists of a series of icon buttons occupying minimum workspace.


A toolbar is a floating element consisting of a row or a column of icon butttons used to activate controls in an application. It can consist of a series of icon buttons separated or combined together. Toolbars are fixed in one position on the screen.

A toolbar allows for a maximum workspace and maintains an unobstructed view of the UI content.


Use when

  • Full-screen usage and unobstructed view of the content is critical, e.g., in graphic applications.
  • Providing a contextual menu benefits the user’s productivity.
  • Offering tools near to the objects being worked on is essential.

Don’t use when

  • You need to navigate between content within the application. Instead, use Side Navigation or Content Tree.
  • A more robust set of tools needs to be displayed. Instead, use Utility Panel.
  • Actions are directly coupled with specific elements on the page.


Toolbars can be classified by their layout as follows:

With Separate Buttons

Icon buttons are aligned next to each other (horizontally or vertically), but not connected.

With Combined Buttons

Icon buttons are connected vertically or horizontally.

What's changed
Date Version Notes Contributors
09/18/2023 1.0.0 New component added. K. Davies, E. Gunther, S. Kaukonen, S.A. Reda, D. Silcock