Button

Buttons are used to initiate an action or open a new page.

React Component LibraryComponent API

Sass StylesheetComponent Styles

Variants

Neutral Button - Most Used

The neutral buttons style is most frequently used

Blue Button - Less Used

Use blue buttons for the primary action. Primary buttons should only appear once per screen (not including the application header or in a modal dialog)

Naked Button - Less Used

Use on special occasions, like birthdays and beach vacations

Destructive

For actions that could have destructive effects on the user’s data  (delete, remove, etc.).

Icon + Text - Most Used

In most cases, we don’t use stand-alone icons. Many users are confused by stand-alone icons. Eliminate guesswork by pairing icons, even familiar ones, with text. When to pair an icon with text:

If the icon increases meaning and usability
If it’s what’s familiar and what the user is scanning for
If other links in the same group are paired with icons, for consistency, pair text links with icons across the group

For consistency, all items in a group should have icons.

Icon Only - Seldom Used

Use icons only if the meaning can be understood more quickly without text
Use if icons are familiar and a functional group – for instance, a set of controls like text editing or video controls
Use if space is limited (e.g. collapsed state, mobile, etc.)

In the above example, users are not familiar with all chart type names. Spelling it out might slow them down. Just an icon works better.

Configuration

Default Button - Most Used

Default

For the principal call to action on the page. Primary buttons should only appear once per screen (not including the application header or in a modal dialog).

Most of time, use default size elements -Designed for maximum legibility, use this size for all primary tasks, including within larger components, like tables.

Unifying height and text size - For the most part, there is a single type size, line height and total height across all Default Sized Elements (filters, fields, buttons, etc.) – 38 px height. That single height means a mix of elements can be arranged in a vertical bar and align precisely, including type on single baseline.

Don't

Use more than one blue button per screen.

Use more than one destructive button per screen.

Resist adding an icon unless it increases usability.

Quick Reference Specs

Type: 16pt Benton Medium
Icon Size: 16x16
Total Height: 38px

Small Button - Less Used

Small

For the principal call to action on the page with tight space.

Limit use of small buttons, overall.

Use for complex menus - Small buttons are reserved for components that reveal on hover or click, for example: complex menus, drop downs, and tooltips. These components are typically smaller in size with tight padding, so small buttons feel balanced. Since space is tight for these components, smaller buttons make functional sense too.

Don't

Avoid small buttons in primary experience.

Do not mix small and default elements.

Quick Reference Specs

Type: 14pt Benton Medium
Icon Size: 16x16
Total Height: 28px

Large Button - Seldom Used

Large

Use a large button if an action needs emphasis. A possible use for a large button is an empty states, when the user has yet to create a single report, budget, etc.

Use a large button if an action needs emphasis.

First action, getting started. A possible use for a large button is an empty states, when the user has yet to create a single report, budget, etc.

Don't

Do not use large buttons in primary experience.

Do not mix large and default buttons.

Quick Reference Specs

Type: 20pt Benton Medium
Icon Size: 16x16
Total Height: 40px

Layout

With text

kdfsldkfjlskdjfsldkfjlskdf

Toolbar

kdfsldkfjlskdjfsldkfjlskdf

Related components

Button Group