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
cancelCreate a new account
cancelCreate this group

NEW

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

check_circle New document
check_circle New referral
cancelCreate new document
cancelCreate 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
cancelCancel the appointment

DISCARD

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

check_circle Discard changes
cancelDiscard 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
cancelO.k, Ok, ok
cancelOK, 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
cancelExport everything
cancelExport 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
cancelClick here to download
cancelYes, 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
cancelChange 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
cancelFind here.......
cancelClick 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
cancelChoose 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
cancelClick here to upload
cancelUpload 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
cancelDelete, Discard
cancelRemove 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
cancelSave As
cancelSave & continue
cancelApply 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
cancelDismiss 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?