Actions
Button
A focused action primitive with five levels of emphasis, semantic colors, native and link behavior, flexible content, and explicit async states.Build a clear hierarchy
Button styling should explain priority before a person reads every label.
Create one dominant action
Use one filled action in a decision group and lower the emphasis of alternatives.
Do not make every action primary
Several filled buttons disrupt hierarchy and force people to read every label before choosing.
Write labels that predict the result
A person should understand the next state before activating the button.
Use a concise verb phrase
Prefer Save changes, Create account, Send message, or Try again and keep the label on one line.
Do not write instructions inside a button
Long or generic labels slow recognition, wrap unpredictably, and compete with surrounding guidance.
Compose actions in context
Spacing and order belong to the surrounding layout, while the button owns its interaction states.
Keep content grouped
Let the parent row or column reposition actions while icon and label remain centered together.
Do not create long empty controls
On wide layouts constrain the action region instead of stretching a short label across the screen.
Communicate consequences and progress
Destructive and asynchronous actions need more than visual emphasis.
Explain destructive consequences
Use the error role, a precise label, and confirmation when the result is difficult to reverse.
Keep async feedback in place
Use loading to prevent duplicate activation and expose the final result near the original action.