UX Framework
Buttons
Search the component library

Buttons

v2.1.2
Download UI Kit v1.9.0 Code

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

Download UI Kit v1.9.0 Code

Dependencies

Colors v2.1.0

Typography v2.0.0

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.

Size

There are three sizes of buttons:

  • Large (Standard): This is the default size. Use this size for touch devices to meet accessibility requirements.
  • Medium: Medium buttons are only used to pair with equally sized input fields. Primary button is not available in this size.
  • Small: Only the default button style is available in this size.

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

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.

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.

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

Large (Standard)
  • 44px tall
  • 20px horizontal padding
  • 18px, Semibold (currently not in the UX Framework typography set)
Medium
Small

Corner radius: 2px

Default buttons

Normal
Hover/Active
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

Distance between buttons: 16px

Available Styles Reference As (How do I use this?)
Standard/Large Button [](/design/c/buttons/v2.1.2/#rd-standard-large-button)
Medium Button [](/design/c/buttons/v2.1.2/#rd-medium-button)
Small Button [](/design/c/buttons/v2.1.2/#rd-small-button)
Primary Button [](/design/c/buttons/v2.1.2/#rd-primary-button)
Default Button [](/design/c/buttons/v2.1.2/#rd-default-button)
CTA Button [](/design/c/buttons/v2.1.2/#rd-cta-button)

Changelog

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