Skip to results

Design Buttons Around User Intent

Components · buttons

Updated 2026-07-28

A button is not just a visual element. It communicates what will happen next.
Use clear action labels:

"Create project" is better than "Continue."
"Delete account" is better than "Confirm."

Match button hierarchy to importance:

Primary actions should stand out.
Secondary actions should support.
Destructive actions should be separated.

Avoid too many primary buttons:

If everything is important, nothing is important.

Make button states complete:

Default.
Hover.
Active.
Focus.
Disabled.
Loading.

Loading buttons should preserve context:

Keep the label visible when possible.
Show that the action is processing.
Prevent duplicate submissions.

A good button removes uncertainty before the click.

Related guides

Design Button Interactions
Design Button Copy That Creates Confidence
Design Component States
Design Modals That Feel Premium with Three Principles
Design Context Menus That Feel Responsive and Efficient