UX Framework
Buttons
Search the component library

Buttons

v2.0.0-beta.4
Download UI Kit v1.9.0 Code

This component defines the standard visual style for buttons.

Download UI Kit v1.9.0 Code

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

Dependencies

Colors v2.0.0-beta.5

Typography v2.0.0-beta.5

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

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. This can only be used ONCE per page.

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

Link style buttons can be used in place of a graphical button for the purposes of de-emphasizing an action (visual hierarchy). However, the premise stands that links should be used for navigation and buttons should be used for actions. Therefore, the need for link style buttons is to 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’s

  • Do use link style buttons to de-emphasize less important actions.
  • Do use link style buttons to trigger an action.
  • Do indicate in design specification the presence of a link style button to your developer.
  • Do use the same visual styling as link text. See typography specification document.
  • Examples: “Edit, Dismiss, Resend Confirmation Email, Reset Password”

Dont’s

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

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.0.0-beta.4/#rd-standard-button)
Large Button [](/design/c/buttons/v2.0.0-beta.4/#rd-large-button)
XLarge Button [](/design/c/buttons/v2.0.0-beta.4/#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.0.0-beta.4/#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.0.0-beta.4/#rd-default-button)

Call to Action buttons

Normal
Hover/Active
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.0.0-beta.4/#rd-cta-button)

Changelog

2.0.0-beta.4

  • ADDED: Color information for confirmation and error button states
  • ADDED: 44px XLarge size button for <768px width screens
  • CHANGED: Fix color discrepancy typos
  • CHANGED: Update button text to reflect new changes in typography spec
  • CHANGED: Increased color difference between CTA normal/hover states and reflected changes in color spec document

2.0.0-beta.3

  • ADDED: CTA button style
  • ADDED: Disabled button explanations
  • CHANGED: Default button bg fills for normal & hover states
  • CHANGED: Disabled buttons for Primary & Default are now the same
  • CHANGED: Dependency links

2.0.0-beta.2

  • ADDED: Confirmation button style

2.0.0-beta.1

  • CHANGED: Adopt new visual style

1.0.0-beta.5

  • ADDED: Dependency links

1.0.0-beta.4

  • ADDED: UXD Accessibility checklist link
  • ADDED: Focus state details in the redlines section
  • ADDED: Medium button size in anticipation of inputs

1.0.0-beta.3

  • ADDED: Illustrator UI mockup file
  • FIXED: Proper link to elements SDK
  • FIXED: Images aren’t downsized

1.0.0-beta.2

  • ADDED: Sketch UI mockup file

1.0.0-beta.1

Initial version