Action labels
A button names what it does. Use a specific verb and its object, so the label promises the outcome.
Write the label
- Start with a verb and name the object: "Save changes", "Send message". Avoid "Submit", and use "OK" only when no specific verb fits at all.
- Show the result, not the mechanism. The button shows the future state: while a video plays, its button reads "Pause". "Continue to billing" says where the reader goes next.
- Keep it to two or three words, verb first: "Add apps", not "You can add apps".
- One primary action per view. Several loud buttons compete for the same attention.
- An icon button needs its verb too, as its tooltip and its accessible name.
- Toggles say what they switch: "Turn on", "Turn off". Adjectives are for visual toggles only, such as "Bold".
The same rules apply to the next step a message offers. See
Examples
Each label is a verb and its object. Only the first is primary.
<tk-button variant="primary">Save changes</tk-button> <tk-button>Send message</tk-button> <tk-button>Add apps</tk-button> <tk-button>Continue to billing</tk-button>
Verb glossary
One canonical verb for each action. Find the outcome you need, use its verb, and leave the word in the last column out.
| Verb | Use for | Not |
|---|---|---|
| Log in | Enter an existing account | Sign in |
| Log out | Leave the account | Sign out |
| Sign up | Create a new account | Register |
| Edit | Modify something that exists | Change |
| Change | Switch to another option | Edit |
| Select | Pick one item | Choose |
| Choose | Pick from several acceptable options | Select |
| Add | Put an existing thing into a context | Create |
| Create | Make something new from scratch | Add |
| Insert | Place something at a position | Add |
| Remove | Take an item out of a list without destroying it | Delete |
| Delete | Destroy the item | Remove |
| Clear | Empty a field or a selection | Delete |
| Move to trash | Delete in a way that can be undone | Delete |
| Restore | Bring back an item from the trash | — |
| Close | Leave a view with nothing to save | Cancel |
| Cancel | Stop and discard unsaved changes, and warn about the loss | Close |
| Done | Leave when the changes are already saved | OK |
| Finish | End a multi-step flow | Done |
| Save | Keep the changes | Submit |
| Apply | Save and keep the panel open | Save |
| Save as | Save a copy as a new item | Save |
| Reset | Return the values to their defaults and stay open | Clear |
| Import / Export | Bring data in or send it out of the product | Upload, Download |
| Upload / Download | Move a file to or from a device | Import, Export |
| Copy | Duplicate to the clipboard | — |
| Find | Jump to the next match | Search |
| Search | Show every match in a set | Find |
| Filter | Shorten a list | Search |
| Next | Go to the following step | Continue |
| Back | Go to the previous step | Previous |
| Run | Start a process | Execute |
| Update | Get a newer version in one step | Upgrade |
| Upgrade | Move to a bigger plan or version | Update |
| Migrate | Move data in several steps | Upgrade |