Nielsen Design System

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.

View Figma Component

View MAF Storybook

View Web Components Storybook

Component Variants

Mode

SizeColorBackgroundDisabled

Rounded CornersIcon

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.
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.

Table of Contents

Component Variants Design Principles Do's and Don'ts

Related Components