Updated: September 20, 2016

Panel Toolbar


The panel toolbar enables the user to trigger an action (such as move up) or change its view settings (such as filter). The toolbar appears in the panel header and has a transparent background.


  • Use the toolbar to provide the user with key actions that impact the whole panel.
  • Provide a title for the panel on the panel toolbar.
  • 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 icons in a button, provide the button name in a tooltip with some explanation and/or a hot key.
  • Order buttons according to usage: most frequently-used action on the left and the most seldom-used action on the right. 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 combine icons and text in a button.
  • Don’t only show the button name in the button tooltip.