The diagram toolbar enables the user to trigger an action, such as adding nodes, or change its view settings, for example, zoom in/out. The toolbar appears above the diagram and has a transparent background.

Do

• Use the toolbar to provide the user with key actions that impact the whole diagram.
• Provide a title in the toolbar if there is no other title for the diagram: if the diagram has no label or the diagram isn’t the only content of a panel.
• Provide action buttons with icons or text.
• When using text in button, use as short a text as possible, preferably a single-word. Use self-explanatory text that clearly describes the action that the button performs, preferably a verb, and explain it in more detail in a tooltip with a hot key.
• When using icon in button, name it in a tooltip with some explanation and/or hot key.
• Order buttons by usage: most frequently-used action on the left (as first) and the most seldom-used action on the right (as last). This ensures that the most important buttons are the last to be moved into the overflow menu.
• Use Web IDE icons for the following generic actions: add, remove, reorder (up, down), sort, filter, and search.
• Align buttons to the right edge of the toolbar.

Don’t

• Don’t combine icons and text in a button.
• Don’t only show the button name in the button tooltip.