Buttons
Search the component library

Buttons

v2.3.0

Buttons are meant to direct users into taking certain actions. Different types of buttons create a hierarchy that helps users navigate and complete actions.

Types

There are three types of buttons:

  • Default: Use for the secondary action within a group of buttons. For example, a Cancel button.

  • Primary: Use for the main action. It appears once within a group of buttons. For example, a Proceed to checkout button.

  • CTA (Call to action): Use for the most important action on the page. It takes priority over the Primary and Default buttons. Use it only once on a page. For example, a Sign in button.

Default button
Primary button
CTA button

Button types

Sizes

There are three sizes of buttons:

  • Extra Large: Use for important actions that are the primary focus on a page, such as, "Sign in" or "Create account".
  • Large: Use for standard actions. This is the preferred size for most buttons.
  • Small: Use if space is limited. (Best to avoid using this size if possible.)
Extra Large button
Large button
Small button

Placement

Place buttons according to the type of actions they perform:

  • Place affirmative actions on the right and then continue with the next step in the process. 

Note: In some cases, a destructive actions such as "Delete" is considered an affirmative action. For example, if an instructor attempts to delete a course. A modal appears confirming the action and asking the instructor if they understand the consequences of this action. In this case, the Delete button represents an affirmative action. (See example below.)

  • Place dismissive actions on the left and then return the user to the previous screen or step in the process.
  • Align button groups with the container's right side by default; however, based on the use case and visual balance you can align differently.


Stack buttons when they don’t fit

Button labels should be as short as possible; however, in the case where multiple buttons just can’t fit in one row, it is better to stack them.

Labels

Button labels should be as short and clear as possible, and should describe the action the button performs.

Do:

  • Try to limit to three words or less. Use one or two words if possible. Remove most prepositions and articles (a, an, the).

Examples: Cancel, Close, Create, Delete, Edit, Learn more, Review, Save, Study, View scores, etc.

  • Use sentence case.
  • Capitalize proper nouns.
  • Use specific action-oriented text for CTAs.

Examples: Add student, Create account, Create new project, Go to Dashboard, Reset password, Send reset link, Sign in, etc.

Be sure to:

  • Check for consistent use across the UI.
  • Reserve enough space for translation to other languages.
  • Avoid excessive use of exclamation points (!).

Don't:

  • Use icons.
  • Use punctuation.
  • Write “Click here.”

Disabled

Use a disabled button only if an action on the current screen can enable it (action possibility).

Use a link style button when you want to use link styled text in place of a button to de-emphasize an action (visual hierarchy). 

Note: The premise stands that you should use links for navigation and use buttons for actions. 

Do:

  • Use to de-emphasize less important actions.

    Examples: Edit, Dismiss, and Reset password

  • Use to trigger an action.

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

  • Use the same visual styling as link text

Don't:

  • Use as part of a grouping with other buttons (button bars, save/cancel).
  • Use for navigation.
  • Use in a situation where it can be disabled.

Redlines

Sizes

Extra Large44px tall
20px horizontal padding
UI Section Heading - Small Bold
Large36px tall
12px horizontal padding
UI Text - Bold
Small32px tall
12px horizontal padding
UI Text - Bold

Corners

2px border radius

Default buttons

NormalBackground is Moonlight
Text is Charcoal
Border is 1px Concrete
Hover/ActiveBackground becomes Alto
Text and border are the same
DisabledBackground remains Moonlight
Text is Concrete
No border
Focus1px Hot Pink outline
2px outline offset

Primary buttons

NormalBackground is Digital Pearson Blue
Text is White
Hover/ActiveBackground becomes Ink Blue
DisabledNo disabled state
Focus1px Hot Pink outline
2px outline offset

CTA button 

NormalBackground is Sunshine Yellow
Text is Charcoal
Hover/ActiveBackground becomes Sunflower Yellow
DisabledNo disabled state
Focus1px Hot Pink outline
2px outline offset

Button spacing

  • Horizontal spacing: 16px
  • Vertical spacing: 12px

Changelog

2.3.0

  • ADDED: Custom focus style to be more accessible

2.2.3

  • ADDED: Guidance for stacked buttons

2.2.2

  • FIXED: UI text in the example image

2.2.1

  • ADDED: Feature links
  • FIXED: Error in small CTA button image

2.2.0

  • CHANGED: Primary button color from Digital Marine Turquoise to Digital Pearson Blue
  • CHANGED: Size names now reflect dev names (Large → Extra Large, Medium → Large)
  • CHANGED: Default button size is now 'Large'
  • CHANGED: Guidance to prefer disabled buttons vs hiding disabled actions
  • CHANGED: Link style guidance disallows disabled version
  • ADDED: Large and Small version of Primary and CTA buttons
  • FIXED: Default button color restored to Charcoal

2.1.2

  • FIXED: Typos and copy errors
  • REPLACED: Old images with more clear and comprehensive visual presentation
  • SIMPLIFIED: Text and took out unnecessary information

2.1.1

  • FIXED: Typos and copy errors

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