Buttons
Search the component library

Buttons

v2.0.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 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. 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

Redlines

Sizes

Standard button28px tall
12px horizontal padding
Basic label font
Large button36px tall
20px horizontal padding
large label font
XLarge button44px tall
20px horizontal padding
large label font

Corners

All sizes use a 2px border radius.

Primary buttons

NormalDigital Pearson Blue (#047A9C) fill
White button text
No border
Hover/ActiveInk Blue (#005A70) fill
White button text
No border
DisabledMoonlight (#E9E9E9) fill
Concrete (#C7C7C7) button text
No border
FocusUse the browser default style

Default buttons

NormalAlto (#D9D9D9) fill
Charcoal (#252525) text color
No border
Hover/ActiveConcrete (#C7C7C7) fill
Charcoal (#252525) text color
No border
DisabledMoonlight (#E9E9E9) fill
Concrete (#C7C7C7) button text
No border
FocusUse the browser default style

Call to Action buttons

NormalSunshine Yellow (#FFB81C) fill
Charcoal (#252525) text color
No border
Hover/ActiveSunflower Yellow (#FF9A19) fill
Charcoal (#252525) text color
No border
DisabledNo disabled state
FocusUse the browser default style

Changelog

2.0.0

Updated for new branding

1.0.0

Initial version