design-button-hierarchy

Fix unclear button hierarchy by mapping primary, secondary, and tertiary actions to distinct visual treatments, ensuring a single dominant primary CTA stands out while subordinate actions remain clearly differentiated to pass UI design reviews.

A button battle occurs when multiple actions compete for visual dominance, confusing users. Button hierarchy resolves this by enforcing a single primary action with subordinate secondary and tertiary styling, reducing user mistakes and clarifying calls to action.

Style destructive and disabled buttons by applying explicit differentiation from standard actions, ensuring destructive actions do not compete with the primary CTA while maintaining clear accessibility contrast across all button states in your UI design.

Yes, you can apply button hierarchy contextually across pages, forms, modals, and toolbars. The system scales the primary, secondary, and tertiary visual treatments to fit each component while keeping action importance reliably communicated.

Establish visual hierarchy for your primary CTA when users are unsure which action to take or when ambiguous gray styling causes errors. It is required whenever a screen has multiple actions competing for attention without clear dominance.