Recipe
CTA Button Hierarchy
A single-page pattern for stacking primary, secondary, and tertiary calls-to-action so users always know the next step.
The Pattern
Rules
- 1.One primary. Solid fill, highest contrast. The action you want most.
- 2.One secondary. Outline or ghost. A safe alternative path.
- 3.Tertiary link. No border, muted. For the hesitant user.
- 4.Equal width. Stack vertically. Never fight for attention side-by-side.
When to Use
Pricing pages, landing hero sections, upgrade modals, and anywhere a single decision point needs clear visual priority. The hierarchy removes friction by giving every user type a comfortable exit ramp.