Buttons
Search the component library

Buttons

v2.1.0

This component defines the standard visual style for buttons.

Usage Guidelines

Every instance of a button should come from this component. See the sections below for information about when to use each type of button.

Features

  • Single collection of all button styles
  • Primary, Default, and CTA button types
  • Default/Large, Medium and Small button sizes
  • Guaranteed compliance with Accessibility contrast requirements

Button types

Buttons come in several different types. Each defines a normal, active/hover, and disabled state.

Primary indicates the main call to action and should only appear once per group of buttons.

Default is your basic button, it can appear multiple times in a given group.

CTA is your Call To Action button and should be used only in very specific instances such as Sign-In. It takes a higher priority over the Primary button type. It is the single most important action you can take on a page. They can only be used ONCE per page. There is no disabled state for the CTA button type.

If a Default or Primary button increases in priority within the context of the same page, it can convert to a CTA button.

All three button types in their various states.

Button sizes

Buttons come in small, medium and large/default sizes. The standard/large size is preferred, but feel free to use the small size where they would fit better with surrounding content. Medium button sizes are meant to only pair with equally sized inputs. Standard/Large buttons are to be used when the UI appears on a mobile device or screen smaller than 768px width (tablet portrait view).

The three button sizes.

Disabled Buttons

Use a disabled button only if an action on the current screen can enable it (action possibility). A disabled button should only appear when contextually relevant. If the button is not needed for the task at hand, it should be hidden.

If a bank of 2 or more buttons is present but can only be enabled by direct action on the same screen, it can be hidden and only shown when enabled to give emphasis of new controls available to the user.

Examples of when to enable/disable vs. show/hide buttons

In situations where link styled text is to be used in place of a button for the purposes of de-emphasizing an action (visual hierarchy), link style buttons should be used. The premise stands that links are to be used for navigation and buttons are to be used for actions. The need for a link styled button is conform to Pearson Accessibility Guidelines for E-Learning (#11 Semantic Markup):

Identify roles (e.g. heading, numbered list, bulleted list, data table, paragraph, emphasized text) of page elements using conventions for the media type. (And do not misidentify roles by using those conventions solely for their visual effects.)

Do:

  • Use link style buttons to de-emphasize less important actions.

    Examples: Edit, Dismiss, Resend Verification Email, Reset Password

  • Use link style buttons to trigger an action.

  • Indicate in design specification the presence of a link style button to your developer.

  • Use the same visual styling as link text. See typography specification document.

Don't:

  • Use link style buttons as part of a grouping with other buttons (button bars, save/cancel).
  • Use link style buttons for navigation.

Button Labels

A button is meant to direct users into taking the action you want them to take. Help users by writing button labels that clearly explain what each button does.

Do:

  • Keep text short. Use as few words as possible.

    Examples: Next, Save, Create, View, Edit, Learn more, Study, Review, Delete, Cancel, Close

  • Use sentence case.

  • Capitalize proper nouns.

  • Use specific action-oriented text for CTAs.

    Examples: Activate, Create account, Sign in, Reset password, Submit, Resend Verification Email, Go to Dashboard

Be sure to:

  • Look across the experience and check for consistent use of labels.
  • Reserve enough space in the label for translation to other languages.
  • Avoid excessive use of exclamation points (!).

Button Placement

Buttons are positioned according to the type of actions:

  • Affirmative actions are placed on the right and continue the process. They are actions that are desired by users or the application.

  • Dismissive actions are placed on the left and return the user to the previous screen or step in the process.

Destructive actions may be affirmative actions

In some situations, destructive actions such as "delete" or “leave” may be affirmative actions. For example, when a student attempts to leave the page in the middle of a quiz, and is asked to confirm if the student acknowledges the consequences of leaving the page at this point. Since prior to seeing the modal, the student clicks on the “Exit” button indicates that the student desires to leave the page, so the “leave” button should be placed on the right to help the student continue with the process as expected.

Adjacent buttons are always spaced 16px apart

Redlines

Sizes

Small button32px tall
12px horizontal padding
UI Text - Basic
Medium button - Use only with input fields36px tall
12px horizontal padding
UI Text - Basic
Standard/Large button44px tall
20px horizontal padding
UI Heading - Section - Small

Corners

All sizes use a 2px border radius.

Primary buttons

NormalDigital Marine Turquoise (#19A6A4) fill
White button text
No border
Hover/ActiveBrackish Turquoise (#179599) fill
White button text
No border
DisabledNo disabled state
FocusUse the browser default style

Default buttons

NormalMoonlight (#E9E9E9) fill
Charcoal (#252525) text color
1px Concrete (#C7C7C7) border
Hover/ActiveAlto (#D9D9D9) fill
Charcoal (#252525) text color
1px Concrete (#C7C7C7) border
DisabledMoonlight (#E9E9E9) fill
Concrete (#C7C7C7) button text
No border
FocusUse the browser default style

Call to Action buttons

Normal YellowSunshine Yellow (#FFB81C) fill
Charcoal (#252525) text color
No border
Hover/Active YellowSunflower Yellow (#FF9A19) fill
Charcoal (#252525) text color
No border
DisabledNo disabled state
FocusUse the browser default style

Changelog

2.1.0

  • CHANGED: Primary button to turquoise color
  • CHANGED: Button sizing and fonts to maintain a11y contrast compliance
  • ADDED: Button placement guidelines
  • ADDED: Link button clarification

2.0.0

Updated for new branding

1.0.0

Initial version