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.
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.1/#rd-standard-button) |
| Large Button | [](/design/c/buttons/v2.0.0-beta.1/#rd-large-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Primary Button | [](/design/c/buttons/v2.0.0-beta.1/#rd-primary-button) |
| Available Styles | Reference As (How do I use this?) |
|---|---|
| Default Button | [](/design/c/buttons/v2.0.0-beta.1/#rd-default-button) |
Initial version
Buttons