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. Apple HIG Motion: https://developer.apple.com/design/human-interface-guidelines/motion Material Design Motion: https://m3.material.io/styles/motion/overview/how-it-works GOV.UK Design System Patterns: https://design-system.service.gov.uk/patterns/ Shopify Polaris Patterns: https://polaris-react.shopify.com/patterns Atlassian Empty State: https://atlassian.design/components/empty-state
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.