UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Interaction Responsive Motion

Button Priority and Action Separation

Primary, secondary, destructive, and navigation actions need clear differences to avoid mistakes.

buttonsactionspriority

Design Principle

Button styling expresses decision cost and risk, not just visual preference.

Principle Button styling expresses decision cost and risk, not just visual preference.

Design action Keep one primary action per form; move destructive actions away from the main flow with semantic copy, and demote secondary actions to outline or text.

Examples Positive example: Publish, archive, delete, save, and submit review. Counterexample: Delete and save are equally prominent.

Apply when Publish, archive, delete, save, and submit review. A page has several executable commands.

Source notes Source note: Synthesized from Apple HIG, Material Design, GOV.UK/Polaris/Atlassian component practices, and interaction accessibility principles.

Agent Directive

Keep one primary action per form; move destructive actions away from the main flow with semantic copy, and demote secondary actions to outline or text.

Apply When

  • Publish, archive, delete, save, and submit review.
  • A page has several executable commands.

Avoid

  • Delete and save are equally prominent.
  • Link buttons and primary buttons look the same.

Knowledge Metadata

Category
Interaction Responsive Motion
Quality
82%
Version
v1
Published
6/6/2026