Button guidelines

Use this guide to make your labels predictable and consequential. Your users depend on them, give it some thought and time.

Confusing buttons
Button glossary

Take the right Actions

Take the right actions in order to move towards your goals. Use them to make your labels predictable and consequential.


Create vs. New

CREATE

Lets the user start something from scratch like creating an account or a group etc. Prefer ‘Create’ over ‘New’.

check_circle Create account
check_circle Create group
cancel

Create a new account

cancel

Create this group

NEW

Lets the user create a new object like documents, files, folders etc.

check_circle New document
check_circle New referral
cancel

Create new document

cancel

Create new referral


Cancel vs. Discard

CANCEL

Use it to cancel the existing action and close the current modal, dialog, or page.

check_circle Cancel
check_circle Cancel appointment
cancel Abort
cancel

Cancel the appointment

DISCARD

Lets the user create a new object like documents, files, folders etc.

check_circle Discard changes
cancel

Discard the changes?


Done vs. Ok

DONE

Use it to show the user their task is finished and can return back to the previous page or window.

check_circle Done
cancel Over

OK

Indicates confirmation of an action. Here both letters remains in uppercase. Never use ‘Close’ adjacent to ‘OK’.

check_circle OK
check_circle OK, got it
cancel

O.k, Ok, ok

cancel

OK, got it!


Export vs. Download

EXPORT

Use export when the user wants to save documents or files in a different format to another location.

check_circle Export all
check_circle Export as PDF
cancel

Export everything

cancel

Export into PDF

DOWNLOAD

Use download when the user wants to transfer files from a remote to a local system.

check_circle Download
check_circle Download update
cancel

Click here to download

cancel

Yes, download this update now


Edit vs. Change

EDIT

Use it to modify or change data, value, or text to the current window or page.

check_circle Edit
check_circle Edit profile
cancel Manage, Change
cancel Edit my profile

CHANGE

Use it to make modifications or changes to the existing window or page.

check_circle Change group
cancel

Change the group


Search vs. Find

SEARCH

Use the search label to indicate an attempt to find information on a computer, database or on the internet. Prefer ‘Search’ over ‘Find’.

check_circle Search
check_circle Advanced search
cancel SEARCH…
cancel Let’s Advanced Search

FIND

Use it to show the process of locating a specific file, document, or any other object on a computer or on the internet.

check_circle Find…
check_circle Find out more
cancel

Find here…

cancel

Click here to Find out more


Select vs. Choose

SELECT

Use it to select data, value or item from the table.

check_circle Select
check_circle Select all
cancel Pick
cancel Select all items

CHOOSE

Use it to make a more subjective decision like choosing files, groups, or templates.

check_circle Choose files
cancel

Choose these files


Import vs. Upload

IMPORT

Use import when the user wants to transfer files from one format to another usually within a new file.

check_circle Import all
check_circle Import template
cancel Import altogether
cancel Import this template

UPLOAD

Use upload when the user wants to transfer files from a local to a remote system via internet.

check_circle Upload
check_circle Upload files
cancel

Click here to upload

cancel

Upload files


Delete vs. Remove

DELETE

Lets the user eliminate or erase an existing object forever.

check_circle Delete
check_circle Delete account
cancel Move to trash
cancel Delete this account

REMOVE

Lets the user remove files, accounts or groups from the current window or page.

check_circle Remove
check_circle Remove account
cancel

Delete, Discard

cancel

Remove this account


Apply vs. Save

APPLY

Lets the user make changes or modifications to a file or document before closing the window.

check_circle Apply changes
check_circle Apply filters
cancel Save changes
cancel Apply these filters

SAVE

Use it to save data or pending modifications to a file or document before closing the window.

check_circle Save as
check_circle Save and continue
check_circle Save changes
cancel

Save As

cancel

Save & continue

cancel

Apply changes


Close vs. Dismiss

CLOSE

Use it to close existing dialog, modal, or page. Never use ‘Close’ adjacent to ‘OK’.

check_circle Close
check_circle Save and close
check_circle Submit and close
cancel Close this window
cancel Save & close
cancel Submit & close

DISMISS

Lets the user leave the existing page or window.

check_circle Dismiss
cancel

Dismiss this page


Exit vs Quit

EXIT

Lets the user leave the existing application or website by closing the page or window. Prefer ‘Exit’ over ‘Quit’.

check_circle Exit
cancelExit page

QUIT

Use it to shut the application and exit the page.

check_circle Quit
cancel Quit app

Remember to

  • Use verbs for initiating an action
  • Use consistent words for labels throughout the product

  • Use sentence case for labels and buttons even if the text is long

  • Keep your microcopy short and crisp without getting vague

  • Avoid punctuations for microcopy
  • Avoid unnecessary words such as ‘a’, ‘an’, ‘the’ etc

  • Avoid the use of Ampersand, always use the full word ‘and’

  • Avoid tricky words, stick to simple recognizable words

  • Avoid using branded terms for labels and buttons

Was this page helpful?