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_round Create account
check_circle_round Create group
cancel_roundCreate a new account
cancel_roundCreate this group

NEW

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

check_circle_round New document
check_circle_round New referral
cancel_roundCreate new document
cancel_roundCreate new referral

Cancel vs. Discard

CANCEL

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

check_circle_round Cancel
check_circle_round Cancel appointment
cancel_round Abort
cancel_roundCancel the appointment

DISCARD

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

check_circle_round Discard changes
cancel_roundDiscard 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_round Done
cancel_round Over

OK

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

check_circle_round OK
check_circle_round OK, got it
cancel_roundO.k, Ok, ok
cancel_roundOK, 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_round Export all
check_circle_round Export as PDF
cancel_roundExport everything
cancel_roundExport into PDF

DOWNLOAD

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

check_circle_round Download
check_circle_round Download update
cancel_roundClick here to download
cancel_roundYes, 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_round Edit
check_circle_round Edit profile
cancel_round Manage, Change
cancel_round Edit my profile

CHANGE

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

check_circle_round Change group
cancel_roundChange 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_round Search
check_circle_round Advanced search
cancel_round SEARCH...
cancel_round 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_round Find...
check_circle_round Find out more
cancel_roundFind here.......
cancel_roundClick here to Find out more

Select vs. Choose

SELECT

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

check_circle_round Select
check_circle_round Select all
cancel_round Pick
cancel_round Select all items

CHOOSE

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

check_circle_round Choose files
cancel_roundChoose 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_round Import all
check_circle_round Import template
cancel_round Import altogether
cancel_round Import this template

UPLOAD

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

check_circle_round Upload
check_circle_round Upload files
cancel_roundClick here to upload
cancel_roundUpload files

Delete vs. Remove

DELETE

Lets the user eliminate or erase an existing object forever.

check_circle_round Delete
check_circle_round Delete account
cancel_round Move to trash
cancel_round Delete this account

REMOVE

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

check_circle_round Remove
check_circle_round Remove account
cancel_roundDelete, Discard
cancel_roundRemove this account

Apply vs. Save

APPLY

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

check_circle_round Apply changes
check_circle_round Apply filters
cancel_round Save changes
cancel_round Apply these filters

SAVE

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

check_circle_round Save as
check_circle_round Save and continue
check_circle_round Save changes
cancel_roundSave As
cancel_roundSave & continue
cancel_roundApply changes

Close vs. Dismiss

CLOSE

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

check_circle_round Close
check_circle_round Save and close
check_circle_round Submit and close
cancel_round Close this window
cancel_round Save & close
cancel_round Submit & close

DISMISS

Lets the user leave the existing page or window.

check_circle_round Dismiss
cancel_roundDismiss 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_round Exit
cancel_roundExit page

QUIT

Use it to shut the application and exit the page.

check_circle_round Quit
cancel_round 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