Buttons allow users to trigger actions, either by clicking the button, or by pressing a corresponding key such as Enter or Space when the button is highlighted in the UI.

Do

• Use icons or text in a button.
• Use the following icons for the following actions: add, remove, reorder, sort, up, down, undo, redo, and search.
• If an action button is inactive and the user can activate it by doing something on the same screen then disable the button.
• If an action button is inactive and the user can do nothing on the screen to make it active, then hide the button.
• When using text in a button, use as short a text as possible, preferably a single word. Use imperatives for all actions, for example: Save, Cancel, Edit. Explain the action in more detail in a tooltip. Also, keep in mind that button text may be longer in other languages (up to 300%).
• When using icons, provide tooltips with meaningful text and make sure that the default accessibility text for that icon is correct for your use case. If not, define app-specific text for accessibility.
• If you want a button to be triggered by pressing the Enter or Space keys, then emphasize the button.

Don’t

• Don’t combine an icon and text into one button.
• If the button is inactive and the user can do nothing on the same screen to make it active, then don’t show that button.
• When using text in button, don’t show a tooltip unless you want to provide more details about the button states.