Also known as:
Link buttonPrimary actionSecondary actionDefault actionDestructive action

Button

Buttons perform actions.

AnchorNeed to know

  • Buttons perform actions.
  • If it needs to navigate somewhere and can be opened in a new tab, use a link instead.

Visuals

Copy guidelines

All buttons across the platform should be clear, actionable and predictable. When a user clicks on a button, they should know what to expect. Therefore, it’s important to pay close attention to the labelling. Here are the most important rules to keep in mind:

Use a verb

Make sure that all your buttons begin with a strong verb (something that elicits an action from the user). Verbs indicate to a user what they’re about to see or do next. There are two ways to use verbs in a button:

Verb + noun

A verb and noun combination gives users more context and can help guide them when the action they’re about to perform isn’t commonplace.

Do:
  • Do
    View heatmap
  • Do
    Create survey
  • Do
    Archive survey
Don't:
  • Don't
    Heatmap
  • Don't
    Create
  • Don't
    Archive

Verb only

A verb only label should be used in cases where the action the user is about to perform is common and the meaning is clear. In these cases, the context in which the button appears is enough to know what the verb is referring to without needing a noun. This is a good option for when space is tight.

Do:
  • Do
    Next
  • Do
    Done
  • Do
    Cancel
Don't:
  • Don't
    Go to next step
  • Don't
    Close this screen
  • Don't
    Ignore this

Here are some commonly used verb-only buttons in the platform:

  • Next (not ‘Continue’)
  • Done (not ‘Close’)
  • Cancel (not ‘Ignore’ or ‘Discard’)
  • Back (not ‘Previous’)
  • View (not ‘See’)
  • Edit (not ‘Change’)
  • Save
  • Update
  • Skip
  • Delete

Write in sentence case with minimal punctuation

All buttons should be in sentence case i.e. the first letter of the first word is capitalized and everything else is in lower case unless it’s a proper noun or feature name. Always err on the side of minimal punctuation, so leave out full stops and commas where possible.

Do:
  • Do
    Create survey
  • Do
    Deactivate & continue
  • Do
    View heatmap
Don't:
  • Don't
    Create Survey
  • Don't
    Deactivate And Continue
  • Don't
    View Heatmap

Keep it short

The optimum number of words for a button is between 2 and 3 words. Buttons should be in active voice, succinct and scannable. So, avoid words like “a” and “an” and use an ampersand if you’re short for space.

Do:
  • Do
    Create survey
  • Do
    Archive survey
  • Do
    Select action
Don't:
  • Don't
    Create a survey
  • Don't
    Archive onboarding survey
  • Don't
    Select this action

Be descriptive

Make sure that your verbs describe the action accurately. Use words like “Cancel” and “Save.” Avoid phrases like, “Click here.” Not only is that redundant, it also doesn’t describe what the user will see next nor does it comply with our accessibility rules.

Don’t use “yes” or “no”

Avoid using “yes” or “no” as buttons. This requires the user to read the body text to know what they’re agreeing or disagreeing to.

Use second person

Any buttons that include a personal pronoun should be written in the second person.

Do:
  • Do
    View your reports
Don't:
  • Don't
    View my reports

Keep in mind that you shouldn’t use personal pronouns unless you’re asking the user to filter something. For example, “View your reports” vs “View all reports.”

The button should match the body

Make sure that the button uses the same verb and noun as what’s used in the body text above it. For example, if you say “Upload your most up-to-date employee data into Culture Amp.” in the body, the button should say “Upload data,” not “Import data.” There are also cases in which the action the user wants to perform is a common label button like “Next” or “Cancel.” Make sure that you’ve rewritten your body copy to make the action very clear. For example, if a user is trying to cancel sending a survey, but there’s also a cancel button to exit the modal they’re viewing, reword the copy of the body to say “don’t send survey.”

To keep in mind

  • All buttons use a button element (not a link element and no role=”button”)
  • All buttons have a large click target of 48px to meet minimum touch target sizes
  • Default action button:
    • Use this when there is more than 1 button or it is not the most important action on the page
  • Primary action button:
    • Use only 1 primary action button per page
  • Destructive action button:
    • Only use when the action will result in data loss, cannot be undone, or otherwise have significant consequences
  • Secondary action button:
    • Secondary Action Buttons kind of look like links but have lots of padding, a large clickable area, and sit next to other buttons, such as a Primary button. That is, they perform actions and do not navigate.
  • Icon + label (icon on the left):
    • RTL: flip the direction of arrow icons when the user is using a right-to-left language
  • Label + icon (icon on the right):
    • RTL: flip the direction of arrow icons when the user is using a right-to-left language
  • Disabled buttons:
  • Supplementary information:
    • You might show additional, optional information on hover and focus using a Tooltip or Popover.

When to use and when not to use

When to use
  • A button indicates to a user that they can perform an action on this page, such as:
    • Apply an action to an object, e.g. save, delete, add an item, undo, create a new item
    • Submit a form to send data
    • Start a new task
    • Trigger a new element to appear on the page e.g. toggle additional information, open a modal
    • Trigger the next step in a process
When not to use
  • Don’t use a button when navigation is involved. Instead, use a link.
  • If the button is used to toggle between 2 states, use a Toggle Switch instead.

See also

External links

Here are some examples of other existing design systems: