Button and CTA copy templates
A button label is a promise about what happens after the click. It carries almost no context of its own, so it has to name the action and its object in the fewest words the layout allows. Button copy is also the copy most likely to break a design: a label that grows from two words to four can push a button onto a second line, unbalance a pair of side-by-side actions, or wrap awkwardly on a 360px screen.
Open in TypeMatchLoads the preset below in this page. It never runs on its own and never touches text you have already typed.
Copy that works, and copy that does not
Works
Save changes
Verb plus object. The user knows exactly what is being saved.
Send invite
Names the outgoing action, so the consequence is unambiguous.
Delete project
Destructive wording matches the destructive result — no euphemism.
Falls short
Submit
Names the mechanism, not the outcome. Works on a form in 1998, not on a product screen.
Click here to continue to the next step
A sentence in a button. It wraps, and 'next step' is not an action.
OK
In a confirmation dialog, 'OK' hides what is being agreed to.
Length to design for
| Element | Suggested range | Why |
|---|---|---|
| Primary button | 1–3 words, roughly 10–20 characters | Keeps a fixed-width button on one line at common desktop and mobile sizes. |
| Secondary button | 1–2 words | Pairs visually with the primary action without dominating it. |
| Text link CTA | 2–5 words | Inline links can afford more context because they sit inside a sentence. |
| Icon button label | 1 word visible, full phrase in the accessible name | The tooltip is short; the accessible name carries the meaning. |
These ranges are starting points drawn from common component widths, not rules. Measure against your own type scale and breakpoints before locking a constraint.
Accessibility considerations
- The visible label should be the start of the accessible name. When aria-label differs from the visible text, speech-control users who say the visible words cannot activate the button.
- Never rely on colour or position alone to signal which action is destructive — put it in the words.
- Icon-only buttons need an accessible name; an icon with no text and no label reads as "button" in a screen reader.
- Translated labels commonly run 30% longer than English. Design the button to accommodate that growth rather than truncating.
Try this preset in TypeMatch
The workspace below is already loaded with a set of button labels and set to match each line separately, so short strings stay short. Nothing runs until you choose to.
Your text
Up to 20,000 characters per run. Emoji, accented characters and multiple paragraphs are all supported.
How your text is handled: matching runs in this browser tab, so the text you paste here is not sent to a TypeMatch server and is not saved between visits — closing or reloading the tab clears it. Usage analytics record only counts and settings, never your text. Anything you copy out is then handled by your own clipboard and the app you paste into.
Detected in your text
- Words
- 7
- Chars
- 46
- No spaces
- 40
- Paragraphs
- 1
Refine result
Recent on this device
Your last 10 runs will be listed here, saved in this browser's local storage only. Nothing is uploaded and you can clear it at any time.
Saved presets
Save the current content type, tone, constraint mode and structure settings so your next run starts configured. Presets stay in this browser.
Generated copy
Variants
Paste your text and press “Match my copy” — you’ll get three verified variants to compare.
- Words
- 0/ 7
- Chars
- 0/ 46
- No spaces
- 0/ 40
- Paragraphs
- 0/ 1