This component defines the standard visual style for buttons.
Usage Guidelines
Every instance of a button or button styled link 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.
Link indicates reduced importance of the option. (‘Cancel’ options should typically use this style, for example.)
Each of the three button types in their various states.
Buttons come in small, default, medium, and large sizes. Prefer the default size but feel free to use these other sizes where they would fit better with surrounding content. Medium buttons are specifically sized to pair well with inputs.
The four button sizes.
All sizes use a 3px border radius.
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Small Button | [](/design/c/buttons/v1.0.0-beta.5/#rd-small-button) |
| Standard Button | [](/design/c/buttons/v1.0.0-beta.5/#rd-standard-button) |
| Medium Button | [](/design/c/buttons/v1.0.0-beta.5/#rd-medium-button) |
| Large Button | [](/design/c/buttons/v1.0.0-beta.5/#rd-large-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Primary Button | [](/design/c/buttons/v1.0.0-beta.5/#rd-primary-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Default Button | [](/design/c/buttons/v1.0.0-beta.5/#rd-default-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Link Button | [](/design/c/buttons/v1.0.0-beta.5/#rd-link-button) |
Initial version
Buttons