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 use each type of button.
Features
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. They can only be used ONCE per page. There is no disabled state for the CTA button type.
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.
Buttons come in small, medium and large/default sizes. The standard/large size is preferred, but feel free to use the small size where they would fit better with surrounding content. Medium button sizes are meant to only pair with equally sized inputs. Standard/Large 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.
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 enable/disable vs. show/hide buttons
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. The need for a link styled button is conform to Pearson Accessibility Guidelines for E-Learning (#11 Semantic Markup):
Identify roles (e.g. heading, numbered list, bulleted list, data table, paragraph, emphasized text) of page elements using conventions for the media type. (And do not misidentify roles by using those conventions solely for their visual effects.)
Use link style buttons to de-emphasize less important actions.
Examples: Edit, Dismiss, Resend Verification Email, Reset Password
A button is meant to direct users into taking the action you want them to take. Help users by writing button labels that clearly explain what each button does.
Keep text short. Use as few words as possible.
Examples: Next, Save, Create, View, Edit, Learn more, Study, Review, Delete, Cancel, Close
Use specific action-oriented text for CTAs.
Examples: Activate, Create account, Sign in, Reset password, Submit, Resend Verification Email, Go to Dashboard
Buttons are positioned 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.
Destructive actions may be affirmative actions
In some situations, destructive actions such as “delete” or “leave” may be affirmative actions. For example, when a student attempts to leave the page in the middle of a quiz, and is asked to confirm if the student acknowledges the consequences of leaving the page at this point. Since prior to seeing the modal, the student clicks on the “Exit” button indicates that the student desires to leave the page, so the “leave” button should be placed on the right to help the student continue with the process as expected.
Adjacent buttons are always spaced 16px apart
All sizes use a 2px border radius.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Standard/Large Button | [](/design/c/buttons/v2.1.0/#rd-standard-large-button) |
| Medium Button | [](/design/c/buttons/v2.1.0/#rd-medium-button) |
| Small Button | [](/design/c/buttons/v2.1.0/#rd-small-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Primary Button | [](/design/c/buttons/v2.1.0/#rd-primary-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Default Button | [](/design/c/buttons/v2.1.0/#rd-default-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| CTA Button | [](/design/c/buttons/v2.1.0/#rd-cta-button) |
Buttons