Button
Last Updated on Sep 29, 2022
Buttons are the primary visual cue for user interaction. They trigger actions, events, and navigation throughout our applications.

Component Variants

Label

Design Principles

  • Buttons should almost always have a label. In rare cases, due to space limitations, icon only buttons are acceptable. They should not be the norm.
  • Icons are not required for buttons, but they make them more fun. Fun is good. See examples for our best practices.
  • In most cases, icons should be on the left side of the label. Exceptions to this are when a button opens a menu or when a button opens or links to something. See the examples for “Next Step”, “Open Plan”, and “Continue Setup” below.
  • Only 1 icon is allowed inside of a button.
  • Don’t use icons in buttons that are “system controls” like buttons in a menu, modal, or dialog.

Writing Guidelines

  • Button labels are always title case. Examples: “Export File”, “Add to Cart”, “Submit”, “Export”. If you are unsure of the proper title case usage, consult TitleCaseConverter.com. Title Case Screenshot
  • Keep button labels as short as possible.
  • Well written button labels usually contain a verb. Strive for either a single verb or a verb and a noun. For example, “Edit Campaign” is better than “Campaign Details”. In some cases, single nouns like “Views”, “Options” or “Layout” are acceptable.

Do's and Don'ts

Limit the number of primary buttons on the screen. One button is best, but two is acceptable in some cases.
Put solid buttons to the right of secondary outlined buttons. If there are several secondary buttons, put them into a button group.
Prioritize the most important actions. Too many calls to action can create confusion and make users unsure of what to do next.
Use tertiary and transparent buttons sparingly. They are most commonly used in menus, modals, and other “system-like” controls. If there are several levels of button importance, they’re acceptable to use.
Don’t put more than three buttons next to each other. If necessary, put them into a button group or use action icons.
Don’t place two solid buttons next to each other.
Don’t add icons to buttons in modals, messages, or other “system-like” button sets.
Don’t mix button sizes in a set. Use consistent button sizes throughout your application.
Don’t use buttons to duplicate the functionality of links, accordions, tabs, or tiles.