Buttons
Search the component library

Buttons

v2.1.0-beta.2

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 each each type of button.

Features

  • Single collection of all button styles
  • Primary and Default button types
  • Default and Large 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, large and xlarge sizes. Prefer the small size but feel free to use the large size where they would fit better with surrounding content. Both small large button sizes are meant to pair with equally sized inputs. XLarge 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

Confirmation Buttons

In situations where the user should receive feedback that the action initiated by a button was successful use the Confirmation Button style which integrates feedback.

For simple binary confirmation feedback, this type of button is sufficient—an additional alert or message is unnecessary. Use Digital Grass Green #038238 from the Conditional Palette in the Colors specification.

The loading indicator should appear for at least 500ms to provide the proper context.

If the action takes longer than 500ms then the loader is displayed until the action completes.

Error style

If the action failed to complete, there is an error state for the button which should be paired with an explanatory alert. Use Strawberry Red #DB0020 from the Conditional Palette in the Colors specification.

If the action results in an error that can be presented within the button context as well. Make sure to pair this with an explanatory alert.

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.
  • 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. Examples:
    • Edit
    • Dismiss
    • Resend Verification Email
    • Reset Password”

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 an action. 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 (!).

Redlines

Sizes

Standard button
Large button
XLarge button

Corners

All sizes use a 2px border radius.

Available Styles Reference As (How do I use this?)
Standard Button [](/design/c/buttons/v2.1.0-beta.2/#rd-standard-button)
Large Button [](/design/c/buttons/v2.1.0-beta.2/#rd-large-button)
XLarge Button [](/design/c/buttons/v2.1.0-beta.2/#rd-xlarge-button)

Primary buttons

Normal
Hover/Active
Disabled
Focus
  • Use the browser default style
Available Styles Reference As (How do I use this?)
Primary Button [](/design/c/buttons/v2.1.0-beta.2/#rd-primary-button)

Default buttons

Normal
Hover/Active
Disabled
Focus
  • Use the browser default style
Available Styles Reference As (How do I use this?)
Default Button [](/design/c/buttons/v2.1.0-beta.2/#rd-default-button)

Call to Action buttons

Normal Yellow
Hover/Active Yellow
Normal Turquoise
Hover/Active Turquoise
Disabled
  • No disabled state
Focus
  • Use the browser default style
Available Styles Reference As (How do I use this?)
CTA Button [](/design/c/buttons/v2.1.0-beta.2/#rd-cta-button)

Changelog

2.1.0-beta.1

  • ADDED: Turquoise CTA button option

2.0.0

Updated for new branding

1.0.0

Initial version