Buttons

Buttons allow users to take actions on a page. They trigger an action when interacted with. Buttons can be found both on pages and in components (e.g. Modals, Input Groups, Cards, and Toolbars).

Design Usage

Use buttons when there are actions a user can perform on a page. While Link Buttons and links look similar, the HTML elements for Link Buttons and links are different and it is important to use both correctly.

  • Perform a secondary action on the page such as Show Receipt, Cancel, Close, or Skip
  • Navigate modals or wizards using Back and Next
  • When the end result keeps the user on the same page, including closing UI components on the page
  • Navigate to another page or external website
  • Open a new tab or browser window
  • Anchor to a specific area of the page

Anatomy

A Button consists of a text label and a container.

Button Anatomy

  1. Text Label
  2. Container

Text Label

  • Write labels in Title Case
  • Labels should be concise and clearly explain what happens when a button is interacted with.
  • Button labels do not truncate or wrap so that users can understand exactly what the button does. Test your button text with different languages to ensure they fit when localized.
Do: Use title case
Don't: Use lowercase, sentence case or ALL CAPS

Container

  • All buttons have a minimum container width of 95px. The only exception is a Link button in a ButtonToolbar.
  • When buttons are placed next to each other, they should have 8px of spacing between them.

Behavior

A button should load together with the component it is in. When interacted with, a button can have a focused/hover state and a pressed state. It returns to its default state after being clicked.

Disabled States

Buttons that can’t be clicked because of unmet conditions are given the disabled state.

Button Types

Primary Button

The Primary button is used to denote the start and end of a workflow for the user. It should only appear once per screen and is not required for all pages. Examples: Submit Report, Approve Invoice, Book Flight

Default Button

The Default button is the standard button for most use cases and actions throughout most experiences.

The Link button is the least prominent button on the page and is typically used for Cancel or Close. Link buttons don’t have a minimum width if used in a ButtonToolbar. While Link Buttons visually look like a text link, they have the same padding, margin, and expected keyboard trigger behavior as a button. This is different than an actual navigational link. See Design Usage for details.

Muted Button

Muted buttons have limited use. Muted buttons are medium-emphasis buttons used for less important actions on the page.

Create Button

The Create button has limited use. A Create button is used for adding new items in Concur. There is no muted version.

Button Sizes

Currently, there are 3 supported button sizes: ‘lg’ (default), ‘md’ and ‘sm’. The large size is recommended for all NUI experiences.

Accessibility

  • Never nest an action (such as button or link) within another action. Screen readers are not able to place focus on nested actions, therefore are not read to users.
  • CoreUI helps assistive technology read a button, by building the following into the default component:
    • Keyboard users expect to trigger a button with the enter AND space keys. This differs from links, in that they expected behavior is to trigger using only the Enter key.
    • 4.5:1 color contrast is met in active, hover, and focus states for primary buttons, button links, and muted buttons. It is not necessary to meet color contrast requirements in disabled button states.

Resources