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.
Both button types in their various states.
Buttons come in default and large sizes. Prefer the default size but feel free to use the large size where they would fit better with surrounding content. Both button sizes are meant to pair with equally sized inputs.
The two button sizes.
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.
If the action may be repeated, then the button can reset to it’s original state after presenting the success message. If it’s a one-off action then it should remain in the message state.
Should the user be navigated to another page after success?
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.
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.
All sizes use a 2px border radius.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Standard Button | [](/design/c/buttons/v2.0.0-beta.2/#rd-standard-button) |
| Large Button | [](/design/c/buttons/v2.0.0-beta.2/#rd-large-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Primary Button | [](/design/c/buttons/v2.0.0-beta.2/#rd-primary-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Default Button | [](/design/c/buttons/v2.0.0-beta.2/#rd-default-button) |
Initial version
Buttons