Button Guidelines
Behaviors
Placement
Always place buttons side-by-side as long as there is space to do so.
Alignment
Align buttons to the end edge of a container when using to prompt a user to navigate through a sequence, or when confirming an action (on the right for left-to-right languages and on the left for right-to-left languages).
For focused tasks and single-page actions, align at the start edge of the container.
Spacing
Space buttons apart by 16px in all cases.
Loading buttons
A button may indicate a loading process after submit. Always place the loading animation on the start edge of the button, and ensure the button is disabled to prevent errant activation.
Use with
should lead other buttons in order in a row, and spacing should remain at 16px.
Do and don’t
Patterns
Do
use as few buttons as possible
Don't
use more than three Buttons in a single area.
Do
use the Button for an actionable user event
Caution
buttons can be used to move between steps of a multi-page action
Don't
use the Button component for navigation or styled links. Instead, use the
component.
Do
space Buttons apart by 16px (1rem)
Don't
space Buttons more or less than 16px (1rem)
Do
use one action button style within a button group. Oftentimes, only use one action button within a page view.
Don't
use more than one primary button within a group
Palette
Do
use the “action” palette for all use cases where possible
Don't
use the “neutral/default” palette unless it is a last resort
Do
use the “Danger” palette for cancel or destructive actions
Don't
use the “neutral/default” palette unless it is a last resort
Usage
Do
use the “outline” usage for a lower priority alternative use case to the “default” sentiment
Don't
use the “outline” usage for cancel or destructive actions
Do
use the “text” usage for the lowest priority action
Don't
use the “text” usage as a high-priority action
Sizing
Do
use the default (lg) size for all use cases where possible
Don't
use the md size unless it is a last resort
Do
use the same size buttons in groups
Don't
use different sized buttons together in a group
Content guidance
Microcopy
- Use sentence-case capitalization
- Do not use all caps or title case
Content considerations
Lead with action verbs to tell the user what will happen next - It is especially important to ensure the action being performed is clear in Danger sentiment buttons
Use concise, easy to scan, clear labels to indicate the action to the user
- Do not use long unnecessary phrases in button labels
- Use active voice to indicate the action
- Do not use vague or generic labels such as “yes” or “no”
Accessibility: Expected actions for assistive technologies
Ensure your label will make sense when spoken aloud with screen readers
Prioritize using validation and errors over disabled buttons as they do not provide feedback