A button initiates an action when the user clicks it.
A set of buttons. The leftmost is active and currently hovered over, the middle one is invalid, the right one is active but not hovered
- Label all text buttons with imperative verbs, using title capitalization.
- If an action requires additional input from the user before it can be carried out, use an ellipsis (for example, Save As...).
- Format all buttons in a consistent way in a dialog. Keep all buttons the same height and do not use more than two different widths.
- Make invalid buttons insensitive (using visual feedback such as grayed-out text and no hover over affect), rather than popping up an error message when the user clicks them.
- Indicate that a button is active with a hover over affect.
- If a task offers multiple actions with one button set as default; indicate the default action with a highlighted line around the button.
- If the button has more than one variation of the primary action, use a split menu button.
- After pressing a button, the user should expect to see the result of their action within 1 second.
- 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.
Content is available under Creative Commons License SA 4.0 unless otherwise noted.