Writing clear button labels
Why labels matter
A button label is the last text a user reads before acting. It should tell them what will happen. Vague labels force people to guess, and guesses lead to mistakes, especially for actions that cannot be undone.
Labels also work for people who skim. Many users scan only the buttons on a screen, so the buttons alone should tell the story of the task.
Patterns that work
- Use a verb and an object. ‘Save changes’, ‘Send message’, ‘Add to cart’.
- Prefer specific over generic. ‘Create account’ is clearer than ‘Submit’ or ‘OK’.
- Name destructive actions. ‘Delete project’ tells the user exactly what is lost, and a generic ‘Confirm’ does not.
- Stay consistent in a flow. If the first screen says ‘Continue’, do not switch to ‘Next’ on the second screen for the same step.
What to avoid
Some habits make labels less useful. These are the most common ones.
- ‘Click here’. It says nothing about the destination and fails for touch and screen-reader users. Describe the action or the target instead.
- Yes and No as answers. For a question such as ‘Discard unsaved changes?’, the buttons ‘Discard’ and ‘Keep editing’ are clearer than ‘Yes’ and ‘No’.
- Unclear pairs. ‘Cancel’ can mean cancel the action or cancel the subscription. When both are possible, name the object, for example ‘Cancel upload’.
- Title Case and all capitals in English. Sentence case is easier to read: ‘Save changes’, not ‘Save Changes’.
Length and translation
Keep labels short enough to fit a narrow phone screen without truncation, usually one to three words. Leave room for text growth, because other languages can run longer.
Buttons that open further steps can show it with an ellipsis, as in ‘Export…’, only when the next step needs more input. Do not add it to buttons that act immediately.
For translation, avoid idioms and puns. Write each label as a complete phrase instead of joining pieces in code. Give translators a note about what the button does.
Order and emphasis help too. Make the safe, expected action the primary button, give the secondary action a quieter style, and keep the position of primary and secondary buttons the same across screens.
Icons can support a label but rarely replace it. An icon-only button needs an accessible name, such as an <code>aria-label</code>, and a visible text label is clearer for actions that are new or risky.
Read each label aloud with its question or context. If the action is not obvious, rewrite it.
Sources
- Nielsen Norman Group. 10 Usability Heuristics for User Interface Design. https://www.nngroup.com/articles/ten-usability-heuristics/
- W3C. Understanding SC 2.4.4: Link Purpose (In Context). https://www.w3.org/WAI/WCAG22/Understanding/link-purpose-in-context.html
This guide was drafted with AI assistance from public standards and references. For the exact wording of a standard, use the sources listed above.