Early preview · Six skills are always free. Paid skills open soon.
Website design · 4 min read

Write button and link labels that explain the next step

Use worked button-label examples and a review prompt to explain actions, distinguish navigation, and make outcomes clear before a click.

Editorial illustration of a door handle shaped like the door it will open.

Write a button or link label that tells someone what will happen when they activate it. Check the actual action first. “Continue” may be enough in a clearly explained sequence, but it can hide a payment step, a submission, or a change the person cannot easily undo.

Identify the behavior behind the label

A link normally takes someone to another destination; a button performs an action in the interface. Use the appropriate element when building the page. A label cannot repair a clickable div that lacks the expected keyboard behavior.

Ask what the action changes, where the person goes, and whether a commitment is made. If a button saves a draft, do not label it “Publish.” If a link opens a preview, do not imply it downloads a file.

Worked examples

These are fictional interface situations. Use the actual behavior of your page when choosing the wording.

Current label and contextClearer wordingWhy
Continue; next screen asks for payment detailsContinue to paymentNames the next step
Submit; action saves an editable draftSave draftDescribes the actual result
Learn more; link opens setup instructionsRead the setup stepsNames the destination
Done; action sends the messageSend messageMakes the commitment visible
Download; link only opens a file previewPreview the fileDoes not promise a saved file

A longer label is not always better. Nearby copy can explain detail while the control stays easy to scan. Avoid making someone read an entire paragraph to discover the main action.

Use the same words around the control

If the page calls an item a “guide,” the button should not suddenly call it a “resource bundle.” Consistent wording helps the person connect the action with the thing they are looking at.

For a fictional download flow, the page might say “Download the guide as text” and the link might say “Download text guide.” If the browser receives a file, that is a truthful description of the intended action. It does not establish that the user saved or opened it successfully.

Distinguish similar actions

A form can have “Save draft” and “Send message,” but their purpose and consequence should be clear. Do not use two visually identical “Continue” controls for different outcomes. A destructive action may need a specific explanation and an appropriate confirmation step, based on the actual risk.

Put instructions where someone needs them. If a button takes the person outside the site, mention that when it would affect their choice. Do not add a warning to every ordinary link merely to make the interface appear cautious.

Ask AI to review labels with behavior

Working template

Review these button and link labels.
For each, I will supply its actual action or destination.
Suggest concise wording that predicts the next step or result.
Keep the page's terms consistent and distinguish save, send, preview,
download, and navigation. Do not invent behavior or add promises.
Control, surrounding copy, and behavior: [list]

Test the labels in the task

Ask someone to describe what they expect before activating the control. Then let them complete the task and compare the result with that expectation. Record the misunderstanding rather than calling a label universally clear after one review.

Check accessible names as well as visible text. A screen reader may announce something different if an unnecessary aria-label overrides the words on the button. Prefer a clear visible label and ordinary semantics, and test special cases in the actual page.

References and further reading

The examples and templates above are original. These references support the definitions and documented behavior discussed in the guide.