Buttons
Search the component library

Buttons

v3.0.0-beta.5

Types

There are four types of buttons:

  • CTA button is your Call To Action button. It is the single most important action on the page and takes higher priority over the Primary button type. It should be used only in specific instances such as the Sign-In process. It can only be used once per page.

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

  • Default button is your basic button, it can appear multiple times in a given group. Note that it is transparent so you are responsible for using it over a contrast compliant background.

  • Tertiary button is for reduced importance actions which should be de-emphasized compared to the default button type.

CTA Button
Primary Button
Default Button
Tertiary Button

Size

There are three sizes of buttons:

  • Extra Large: Use this button for important actions that are the primary focus of a page, for example ‘Sign in’ or ‘Create account’.
  • Large: The standard button size, prefer this button as a default size unless there is a reason to go up or down.
  • Small: Try to avoid using this size if possible, but it is available for space constrained situations.
Extra Large Button
Large Button
Small Button

Color contrast

Buttons and their text must be sufficiently contrasty against the background color. Be especially careful with default and tertiary buttons that the page background color is contrast compliant with the default’s text color or the tertiary’s gray background color.

Refer to the Color component for information on contrast-compliant pairings.

Button placement

Buttons are positioned relatively 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.

Align the button group to the right side of the container by default

With that said, you still have the flexibility to align the button groups differently based on the use case and visual balance.

Destructive actions may be affirmative actions

In some situations, destructive actions such as “delete” or “leave” may be affirmative actions. For example, an instructor attempts to delete a course. A modal shows up to confirm the action and make sure the instructor understand the consequences followed by the action. In such case, the “delete” button is an affirmative action.

Button labels

A button is meant to direct users into taking certain actions. Help users by writing labels that clearly communicate 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, and 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, and 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 (!).

Disabled buttons

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

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. Link buttons should not appear in a situation where they could be disabled.

Do:

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

    Examples: Edit, Dismiss, Resend Verification Email, and 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

Don’t:

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

Redlines

Sizes

Extra Large
Large
  • 36px tall
  • 20px minimum horizontal padding
  • Bold UI Text
  • 36px corner radius
Small
  • 32px tall
  • 12px minimum horizontal padding
  • Bold UI Text
  • 32px corner radius

CTA button (Call To Action)

Normal
Hover/Active
Disabled
  • No disabled state
Focus
  • Browser default style

Primary buttons

Normal
Hover/Active
Disabled
  • No disabled state
Focus
  • Browser default style

Default buttons

Normal
  • Background is transparent
  • Text is Graphite (#505759)
  • Border is 1px Concrete
Hover/Active
  • Border becomes 1px Graphite (#505759)
Disabled
Focus
  • Browser default style

Tertiary button

Normal
  • Background is Moonlight
  • Text is Graphite (#505759)
Hover
  • Background becomes #ededed
Disabled
  • No disabled state
Focus
  • Browser default

Changelog

3.0.0-beta.5

  • ADDED: Section advising on proper background contrast

3.0.0-beta.4

  • FIXED: Typos
  • UPDATED: Accessibility checklist
  • CHANGED: Order of button types

3.0.0-beta.3

  • CHANGED: Hover styles for tertiary and default buttons
  • CHANGED: Background on tertiary buttons to Moonlight

3.0.0-beta.2

  • CHANGED: Large button size to 36px
  • ADDED: Extra large button size
  • ADDED: Initial redlines
  • CHANGED: Text color to graphite for default and tertiary buttons

3.0.0-beta.1

  • CHANGED: Large button size to 40px
  • REMOVED: Extra large button size
  • CHANGED: Button visual styling
  • ADDED: Tertiary button type

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