Overview
Buttons allow users to trigger an action or event with a single click. Our UIs can fluctuate from high to low density of information. Thus, to help guide our users, we have different button variations in signaling various meanings so our app's experience is digestible and seamless.
Anatomy
Usage
- Buttons may contain icon on the left side only
- Use 8 px spacing between buttons
- Replace text with a loader if action is submitted, but still processing
- Button width is set by its content; avoid changing its width
- Use only one primary button, and any remaining calls to action should be represented as lower emphasis buttons.
Variants
With and without icon
Buttons should always have a label, unless they are only using an Icon Button that is universally understood and accessible. They can have an optional icon, but it should not be used for decoration. Use an icon only when necessary and when it has a strong association with the label text.
Primary variant
The primary button communicates strong emphasis and is reserved for actions that are essential to an experience. Don’t use more than 3 primary buttons in the same view. These give extra prominence to important actions and are meant to establish a clear hierarchy.
Secondary variant
The secondary button is for medium emphasis. Use it in place of a call to action button when the action requires less prominence, or if there are multiple primary actions of the same importance in the same view.
Tertiary variant
The tertiary button is for low emphasis. It’s paired with other button types to surface less prominent actions.
Negative variant
The negative button is for emphasizing actions that can be destructive or have negative consequences if taken. Use it sparingly. This variant is supported in the primary, secondary, and tertiary variants.
Sizes
Buttons come in three different sizes: small, medium, and large. The medium size is the default and most frequently used option. Use the other sizes sparingly; they should be used to create a hierarchy of importance within the page.
Justified
A button can become justified. By default, it is not justified since the button size depends on the label and/or icon inside of each button. When a button is justified, it takes up the entire available container width.
Disabled
A button in a disabled state shows that an action exists, but is not available in that circumstance. This state can be used to maintain layout continuity and to communicate that an action may become available later.
Loading
Buttons can indicate that a quick progress taking place. In this case, the label and optional icon disappear and a progress circle appears. The progress circle always shows an indeterminate progress.
Use the loading state for a button sparingly. It should be reserved only for when the progress is supposed to be quick (taking 5 seconds or less), and when there is no better way to communicate as such.
Do's and dont's
Use 1 or 2 words
Use 1 or 2 words, no longer than 4 words, with fewer than 20 characters including spaces. Use active verbs or phrases that clearly indicate action. Don’t use punctuation marks such as periods or exclamation points. Don't use vague and generic labels that make the user read the dialog before taking action.
Use sentence-case capitalization
Don't use secondary buttons in groups
In groups, use the primary button as the main action, put the tertiary as the second option. Don't use primary button next to secondary.
