> ## Documentation Index
> Fetch the complete documentation index at: https://content-designer-ux-writing-skill-26.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Writing buttons and links

> Create clear, actionable buttons and links that help users accomplish their goals

Buttons and links are critical navigation elements that enable users to take action. Effective button and link text clearly communicates what will happen when clicked.

## Purpose

Buttons and links should:

* Enable users to take action
* Clearly communicate the result of clicking
* Use specific, descriptive verbs
* Match user mental models

## The pattern

Follow this simple pattern for button labels:

```
[Verb] [object]
```

### Examples

<CardGroup cols={2}>
  <Card title="Good examples" icon="check" color="#16A34A">
    * Save changes
    * Delete account
    * View details
    * Download report
    * Send message
  </Card>

  <Card title="Avoid" icon="xmark" color="#DC2626">
    * OK
    * Submit
    * Click here
    * Continue
    * Proceed
  </Card>
</CardGroup>

## Format guidelines

<Steps>
  <Step title="Use active imperative verbs">
    Start with a strong action verb that describes what happens.

    * **Good**: "Delete account"
    * **Avoid**: "Account deletion"
  </Step>

  <Step title="Include the object">
    Tell users what they're acting on.

    * **Good**: "Save changes"
    * **Avoid**: "Save"
  </Step>

  <Step title="Use sentence case">
    Only capitalize the first word (unless it's a proper noun).

    * **Good**: "Create new project"
    * **Avoid**: "Create New Project"
  </Step>

  <Step title="Keep it concise">
    Aim for 2-4 words, maximum 6 words.

    * **Good**: "Export to CSV"
    * **Avoid**: "Click here to export your data to CSV format"
  </Step>
</Steps>

## Link text

Links require special attention for accessibility and clarity.

### Screen reader friendly

Screen readers often list all links on a page out of context. Your link text should make sense on its own.

<Accordion title="Why this matters">
  Users with screen readers often navigate by pulling up a list of all links. If your links say "click here" or "learn more," the list becomes useless:

  * Click here
  * Click here
  * Learn more
  * Read more

  Instead, descriptive links create a useful list:

  * Read our privacy policy
  * View pricing details
  * Download the guide
  * Contact support
</Accordion>

### Link best practices

<Check>Use descriptive text that tells users where they're going</Check>
<Check>Make links long enough to click easily (at least 2-3 words)</Check>
<Check>Avoid "click here" or "read more"</Check>
<Check>Don't repeat the same link text for different destinations</Check>

### Examples

| Context        | Bad                             | Good                              |
| -------------- | ------------------------------- | --------------------------------- |
| Privacy policy | Click here for more information | Read our privacy policy           |
| Help docs      | Learn more about this feature   | View the integration guide        |
| Contact        | Click here to contact us        | Contact support                   |
| Download       | Download                        | Download the onboarding checklist |

## Context-specific patterns

### Primary actions

Primary buttons should clearly state the main action:

* **Sign up screens**: "Create account" (not "Get started")
* **Checkout**: "Place order" (not "Submit")
* **Forms**: "Save changes" (not "Save")

### Secondary actions

Secondary buttons can be slightly less specific:

* "Cancel"
* "Go back"
* "Skip for now"

### Destructive actions

For irreversible actions, be explicit:

<Warning>
  Use clear, serious language for destructive actions. Users should never accidentally delete data.
</Warning>

* **Good**: "Delete account permanently"
* **Avoid**: "Remove" or "Clear"

### Confirmation buttons

Confirmation dialogs should repeat the action:

```
Dialog: "Delete this project? This can't be undone."
Button: "Delete project" (not "Yes" or "Confirm")
```

## Quick reference

<CardGroup cols={2}>
  <Card title="Do" icon="check">
    * Start with an action verb
    * Include the object being acted on
    * Use sentence case
    * Be specific about the action
    * Keep it under 6 words
    * Make links descriptive
  </Card>

  <Card title="Don't" icon="xmark">
    * Use generic labels (OK, Submit)
    * Say "click here" in links
    * Use title case
    * Leave out the object
    * Make links too vague
    * Rely on context alone
  </Card>
</CardGroup>

## Related resources

<CardGroup cols={3}>
  <Card title="Accessibility" icon="universal-access" href="/guides/accessibility">
    Learn more about writing accessible link text
  </Card>

  <Card title="Voice and tone" icon="comments" href="/concepts/voice-and-tone">
    Adapt button copy to your brand voice
  </Card>

  <Card title="Quality standards" icon="star" href="/concepts/quality-standards">
    Apply the four quality standards to buttons
  </Card>
</CardGroup>