In a design system, how should a button emphasis hierarchy work, and where do destructive actions fit into it?
answer
- guide the eye to one action
- primary, secondary, low emphasis
- destructive is intent, not rank
- never colour alone
- verb plus object labels
basics
~20 sEmphasis ranks actions so the eye finds the main one: usually one primary per view or region, secondary for alternatives, low emphasis for minor ones. Destructive is an intent on any rung, signalled by label and placement, not colour alone.
solid answer
~40 sAn emphasis hierarchy tells users which action matters most. Systems usually offer a **primary** style for the main forward action ("Send for signature"), a **secondary** style for alternatives ("Save draft"), and a **low-emphasis** text or outline style for minor actions ("Preview"). One primary per view or region is a common convention, because emphasis only guides the eye when one thing stands out. **Destructive** is not another rung; it is an intent that can appear at any emphasis. "Void agreement" may be low-emphasis in a toolbar but the primary action inside a screen dedicated to voiding. It needs a clear verb-and-object label, separation from safe actions, a cue beyond colour — WCAG 2.2's 1.4.1 Use of Color forbids colour as the only means of conveying information — and confirmation or undo when irreversible.
go deeper
Recall the rungs of the hierarchy and when to use each, and that destructive actions need a clear label and a cue beyond colour.
Explain why emphasis is relative, why one primary per region is a convention with reasons, and how destructive intent sits across rungs.
Show how you would review a product's screens for emphasis misuse and destructive-action risk, and which safeguards you tied to reversibility.
Consider how the system encodes these rules in components and guidance so teams cannot easily ship a red generic button or three primaries.
## What an emphasis hierarchy is for A screen usually offers several actions, and they do not matter equally. An **emphasis hierarchy** gives each button a visual weight proportional to its importance, so users can find the expected next step without reading every label. In an e-signature product's "Prepare agreement" screen the actions might be Send for signature, Save draft, Preview and Discard changes. Presented with equal weight, they compete; ranked, they guide. ## The usual rungs | Rung | Visual treatment (typical) | Use | E-signature example | |---|---|---|---| | **Primary** | Filled, highest contrast | The main forward action of a view or region | Send for signature | | **Secondary** | Outlined or subtle fill | A real alternative to the primary | Save draft | | **Low emphasis** | Text-only or ghost | Minor, frequent or supporting actions | Preview, Add another signer | The names and number of rungs vary by system; the idea is the same on the web and on native platforms. **One primary per view or region** is a common convention, not a standard. Its reason: emphasis is relative, so two primaries cancel each other out. Large screens with independent regions (a document panel and a settings panel) may reasonably carry one primary each. ## Where destructive actions fit Destructive actions (Void agreement, Decline to sign, Delete template) are best treated as an **intent layered on top of emphasis**, not as a fourth rung: - In a toolbar where voiding is rare, "Void agreement" is low emphasis, perhaps behind an overflow control. - On a screen whose only purpose is to confirm voiding, it becomes the primary action, carrying the destructive treatment. - It should rarely be the primary action on a screen whose main job is something else, because a highly emphasised destructive button invites mistakes. ## How to signal a destructive action 1. **Label with verb and object.** "Void agreement" is unambiguous; "OK" or "Continue" is not. 2. **Do not rely on colour.** A red fill is a helpful cue, but WCAG 2.2 success criterion **1.4.1 Use of Color** (Level A) says colour must not be the only visual means of conveying information, indicating an action or distinguishing an element. The label, and optionally an icon, must carry the meaning too. Red also does not signal danger in every culture or to every user with a colour-vision deficiency. 3. **Separate it from safe actions.** Distance and grouping reduce slips, especially on touch screens. 4. **Match the safeguard to reversibility.** Offer undo where the action can be reversed; ask for confirmation where it cannot. How that confirmation works is a dialog decision. ## Applying it to one e-signature screen On the "Prepare agreement" screen, the hierarchy might settle like this: - **Send for signature** is the single primary: it is the reason the screen exists. - **Save draft** is secondary: a real alternative that many senders use. - **Preview** and **Add another signer** are low emphasis: frequent but supporting. - **Discard changes** is destructive and low emphasis, placed apart from Send, labelled with its object, and backed by undo or confirmation because it loses work. If research shows most senders save drafts rather than send, the hierarchy should follow the behaviour, not habit. ## Placement and order The order of primary and secondary buttons (primary first or last, left or right) differs between platforms and systems. The important rule is **consistency within a product and alignment with its platform's convention**, not one universally correct order. ## Emphasis and state are separate axes Emphasis says how important an action is; state says what it is doing right now. A primary button can be loading, a secondary button can be unavailable, and a destructive button can be focused. A system that folds these together, for example by using the low-emphasis style to mean unavailable, loses the ability to say both things at once. ## Common mistakes - Three primary buttons on one screen, so nothing stands out. - Styling the destructive action as primary on a screen where it is not the main task. - Signalling destruction with colour only, leaving the label generic. - Choosing emphasis by aesthetics rather than by the importance of the action.
- Is having two primary buttons on one screen always wrong?No. The convention is one primary per view or region. A wide screen with two independent regions, such as a document editor and a separate settings panel, can reasonably carry one primary each. What is wrong is two primaries competing for the same decision, because then neither stands out.
- Should a destructive button always be red?A red treatment is a common, useful cue, but it cannot carry the meaning alone: WCAG 1.4.1 requires information not to be conveyed by colour only, and colour meanings are not universal. The label must state the destructive action, and emphasis still follows importance, so a rarely used destructive action can be low emphasis.
saying these in an interview costs you the question
- Destructive actions should always be the most prominent button so users notice them.
- A red fill alone is enough to mark a button as destructive.
- Every button on a screen should be primary so all actions are easy to find.
- There is one universally correct order for primary and secondary buttons.
- A generic 'OK' label is fine if the button is red.