prompt
Button Hierarchy Guide
Defines a clear button hierarchy (primary, secondary, tertiary) with when to use each.
Define a button hierarchy for {{product}}. Describe primary, secondary, tertiary, and destructive buttons: their visual treatment, when to use each, how many primaries per screen, and how disabled and loading states behave. Add one example of a screen using them together correctly.
Variables
productProductExample output
Button hierarchy. Primary: solid brand fill, white text — the one main action; max one per screen. Secondary: outlined or tinted — supporting actions like Cancel or Back. Tertiary: text-only link style — low-emphasis actions like Learn more. Destructive: red treatment, used only for delete or irreversible actions, often with a confirm step. Disabled: reduced opacity, no hover, with a tooltip explaining why if not obvious. Loading: replace label with a spinner, keep width stable. Example: a settings dialog uses Save (primary), Cancel (secondary), and Reset to defaults (tertiary), with Delete account (destructive) separated lower down.
Details
Author
AI Khazna
License
—
Security
Vetted
Type
prompt
Frequently asked questions
What is the Button Hierarchy Guide prompt?
Defines a clear button hierarchy (primary, secondary, tertiary) with when to use each.
Is Button Hierarchy Guide free?
Yes, it is free to use.
Related assets
More curated picks in Design & Creative.
Checks color pairs against WCAG contrast rules and suggests accessible fixes.
Specs a UI component with its variants, states, sizing, and usage rules for a design system.
Turns a vague design ask into a structured creative brief a designer can act on.
Adapts a light-mode color palette to an accessible dark-mode palette with surface and text tokens.
Defines a consistent illustration direction including style, palette, composition, and do/don't rules.
Recommends harmonious font pairings for a brand or project with rationale and usage guidance.
Audit before you install
Run any source through our checks - AI visibility, security, performance, and stack detection.
AI Agent / MCP Server Tester
ai testing
Automated Web Security Scan
security
AI Content Quality Test
arabic content
Site Stack Detector
migration
PageSpeed Analyzer
performance
AI SEO / AEO / GEO Audit
ai visibility
llms.txt Generator
ai visibility
Schema / JSON-LD Builder
ai visibility
Readability Score
arabic content
AI Cost Calculator
ai testing
Headline Analyzer
arabic content