This article belongs to the UI Wireframing column. See the column for more articles.

A button is a control that performs an action, such as sending an E-mail. Buttons are easy to design, but they are a little more complicated to use, with some tricky things to watch out for.

When to use buttons

According to Designing Interfaces, buttons should be “large, understandable, obvious, and easy for even the most inexperienced computer user to use.” They are best used for important actions.

The challenge with buttons is that the more you add, the less obvious each button becomes and the less easy it is to use. So use them wisely and sparingly.

Let’s look at an example:

There are many elements on this page, including several actions that the user can perform. But there are only three buttons for the most important actions: Buy Now Buy It Now, Add to Cart Add to Cart, Sell Now.

How to use buttons

Set the buttons that the user is most likely to select as default (primary).

Avoid using buttons to mimic the behavior of other controls.

There is enough space between the buttons so that the user can easily click on one of them.

Avoid displaying images in standard buttons.

The text in the button should use a verb or phrasal verb and be capitalized in title style.

If clicking the button immediately opens another window, dialog box, or application to perform its action, add the ellipsis to the button text.

Separate destructive buttons from non-destructive controls.

Respond immediately after pressing the button.

When several buttons are placed next to each other, make sure they have the same width. This is especially important for canceling and determining the OK button.

If pressing the button incorrectly may cause data loss, do not set the default button

Keep the labels short so that the buttons don’t take up too much space. It’s also important to consider how tags change length when localized.

Basic usage

  • Use the primary state for the default action
  • The default action uses the main status button
  • Group related buttons
  • Combined correlation button
  • Position unrelated buttons away from realated ones
  • Move unrelated buttons away from related buttons

State States

Change Variations

  • Icon buttons Icon buttons

Button text has an icon next to it, or an icon directly replaces the text.

  • Split Menu buttons

Buttons can be activated, but also provide a secondary menu of drop-down menu options

References

  1. Apple macOS Human Interface Guidelines Apple macOS Human Interface Guidelines
  2. GNOME Human Interface Guidelines

Related Controls

  • Links to the Links

Further Reading

  • “Designing Interfaces” by Jenifer Tidwell

Design Interfaces by Jenifer Tidwell

  • Google Material Design button guidelines

Google Material Design Button Guide

  • Button UX Design: Best Practices, Types and States (UX Planet)

Button UX Design: Best Practices, Types, and States (UX Planet)

  • Buttons in Design Systems (EightShapes)

“Buttons in Design Systems”

Text Input