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 each 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, large and xlarge sizes. Prefer the small size but feel free to use the large size where they would fit better with surrounding content. Both small large button sizes are meant to pair with equally sized inputs. XLarge 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 the user should receive feedback that the action initiated by a button was successful use the Confirmation Button style which integrates feedback.
For simple binary confirmation feedback, this type of button is sufficient—an additional alert or message is unnecessary. Use Digital Grass Green #038238 from the Conditional Palette in the Colors specification.
The loading indicator should appear for at least 500ms to provide the proper context.
If the action takes longer than 500ms then the loader is displayed until the action completes.
If the action failed to complete, there is an error state for the button which should be paired with an explanatory alert. Use Strawberry Red #DB0020 from the Conditional Palette in the Colors specification.
If the action results in an error that can be presented within the button context as well. Make sure to pair this with an explanatory alert.
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.)
A button is meant to direct users into taking an action. Help users by writing button labels that clearly explain what each button does.
Keep text short. Use as few words as possible.
Examples
Use specific action-oriented text for CTAs.
Examples
All sizes use a 2px border radius.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Standard Button | [](/design/c/buttons/v2.1.0-beta.2/#rd-standard-button) |
| Large Button | [](/design/c/buttons/v2.1.0-beta.2/#rd-large-button) |
| XLarge Button | [](/design/c/buttons/v2.1.0-beta.2/#rd-xlarge-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Primary Button | [](/design/c/buttons/v2.1.0-beta.2/#rd-primary-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Default Button | [](/design/c/buttons/v2.1.0-beta.2/#rd-default-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| CTA Button | [](/design/c/buttons/v2.1.0-beta.2/#rd-cta-button) |
Updated for new branding
Initial version
Buttons