Buttons are one of the most common and basic user interface elements. Buttons can be used to perform actions, toggle settings or views, activate tools, or to display dialogs, popovers, or other user interface elements.
A button can contain an icon, button, or — more unusually — an image. Follow the icons and artwork guidelines when deciding which to use.
After pressing a button, the user should expect to see the result of their action within 1 second.
Do not use more than one or two different widths of button in the same window, and make all of them the same height. This will help give a pleasing uniform visual appearance to your window that makes it easier to use.
Do not assign actions to double-clicking or right-clicking a button. Users are unlikely to discover these actions, and if they do, it will distort their expectations of other buttons on the desktop.
Make invalid buttons insensitive, rather than popping up an error message when the user clicks them.
When several buttons are placed next to each other, ensure that they have the same width. This is particularly important for pairs of Cancel and OK buttons.
In a dialog, one button may be made the default button, which is shown with a different border and is activated by pressing Return. Often this will be the OK or equivalent button. However, if pressing this button by mistake could cause a loss of data, do not set a default button for the window.
In cases where a button has a particularly important affirmative role, it can be given a suggested style. This highlights the button, and helps to distinguish it from other visible controls.
Buttons which have a destructive consequence, such as removing or deleting a content item, can be given a destructive style. This highlights the button by coloring it, and acts as a warning to the user.
Each view should only include a single suggested or destructive button.
This work is licensed under a.
Got a comment? Spotted an error? Found the instructions unclear? Send feedback about this page.