UX Framework
Buttons
Search the component library

Buttons

v2.2.2
Download UI Kit v1.9.0 Code

Buttons communicate the action that will occur when the user triggers them.

Download UI Kit v1.9.0 Code

Dependencies

Colors v3.0.1

Typography v2.1.1

Documents

UX Accessibility Checklist

Documentation Assets (Sketch)

Types

There are three types of buttons:

  • Default button is your basic button, it can appear multiple times in a given group.

  • Primary button indicates the main call to action and should only appear once per group 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.

Default Button
Primary Button
CTA 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

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
Small

Corners

2px border radius

Default buttons

Normal
Hover/Active
  • Background becomes Alto
  • Text and border are the same
Disabled
Focus
  • Browser default style

Primary buttons

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

CTA button (Call To Action)

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

Button Spacing

Buttons are 16px apart by default

Changelog

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