# Specific Button Labels

**MUST** · **ID:** `content-specific-button-labels` · **Category:** content
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-specific-button-labels

> MUST: Label buttons with verb plus object ("Save API Key", "Delete Project"), never a generic "Continue" or "OK" — the label is read out of context by a screen reader cycling controls.

Name the action in the button label instead of using generic words like Continue or OK

A button label is often read out of context — by a screen reader cycling the controls list, or by a user who skipped the body copy. A verb-plus-object label ("Save API Key", "Delete Project") stays meaningful alone and tells the user what will happen before they commit.

## Bad — do not do this

`content-specific-button-labels-bad`

```tsx
export function SpecificButtonLabelsBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-4">
        <div>
          <h4 className="font-medium text-foreground">Add API Key</h4>
          <p className="text-sm text-muted-foreground">
            This key will be stored encrypted.
          </p>
        </div>
        <div className="flex gap-2 justify-end">
          <button className="px-3 py-2 bg-muted text-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Back
          </button>
          <button className="px-3 py-2 bg-primary text-primary-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Continue
          </button>
        </div>
      </div>
      <p className="text-xs text-error">
        "Continue" to what? Read out of context — by a screen reader, or in a
        button list — the label says nothing about what it does
      </p>
    </div>
  );
}
```

## Good — do this

`content-specific-button-labels-good`

```tsx
export function SpecificButtonLabelsGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 space-y-4">
        <div>
          <h4 className="font-medium text-foreground">Add API Key</h4>
          <p className="text-sm text-muted-foreground">
            This key will be stored encrypted.
          </p>
        </div>
        <div className="flex gap-2 justify-end">
          <button className="px-3 py-2 bg-muted text-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Cancel
          </button>
          <button className="px-3 py-2 bg-primary text-primary-foreground text-sm rounded-md focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring">
            Save API Key
          </button>
        </div>
      </div>
      <p className="text-xs text-success">
        The label names its own action, so it survives being read alone —
        verb + object, no context required
      </p>
    </div>
  );
}
```

## References

- [Vercel Web Interface Guidelines](https://github.com/vercel-labs/web-interface-guidelines)
- [Google Style: UI Elements](https://developers.google.com/style/ui-elements)