@kaizen/draft-button

title: Button navTitle: Button summaryParagraph: Buttons perform actions. tags: ["Link button", "Primary action", "Secondary action", "Default action", "Destructive action", "Directional link", "Pagination link"] githubLabels: ["component:button"] needToKnow:

• Buttons perform actions.
• If it needs to navigate somewhere and can be opened in a new tab, use a link instead. headerImage: button demoStoryId: components-button--default-kaizen-site-demo health: designed: true documented: true implemented: true latestDesign: true allVariants: true responsive: true internationalized: true accessible: true

import WhenToUseAndWhenNotToUse from "docs-components/WhenToUseAndWhenNotToUse" import WhenToUse from "docs-components/WhenToUse" import WhenNotToUse from "docs-components/WhenNotToUse"

import DoAndDontContainer from "docs-components/DoAndDontContainer" import Do from "docs-components/Do" import Dont from "docs-components/Dont"

Visuals

To keep in mind

• All buttons excluding Pagination 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
• Secondary action button:
  • Secondary action buttons can look like links, however, they perform actions and are not recommended for navigating.
• Destructive action button:
  • Only use when the action will result in data loss, cannot be undone, or otherwise have significant consequences
• 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:
  • See the Interaction states guidelines for disabled elements.
• Pagination buttons:
  • These are purpose-built for the Pagination component.
  • They look like buttons but are instead links. Pagination buttons use a link element because it navigates to another page.
  • Pagination link:
    • Centrally located within the Pagination component to display the available page numbers.
    • Used to navigate between available pages.
  • Directional link:
    • Bookends (to the left and right of) the Pagination links.
    • “Back” and “Next” links allow page navigation to occur incrementally across a page list.
    • (Optional) “Start” and “End” links allow the user to skip to the first and last items in a page list.
• Focus indicator:
  • See Interaction states guidelines for focus indicators.
  • Must show a focus indicator on keyboard navigation, but not on click.
• Working buttons:
  • See the Interaction states guidelines for disabled elements.
• Supplementary information:
  • You might show additional, optional information on hover and focus using a Tooltip or Popover.

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.

• View heatmap
• Create survey
• Archive survey

• Heatmap
• Create
• 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.

• Next
• Done
• Cancel

• Go to next step
• Close this screen
• 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.

• Create survey
• Deactivate & continue
• View heatmap

• Create Survey
• Deactivate And Continue
• 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.

• Create survey
• Archive survey
• Select action

• Create a survey
• Archive onboarding survey
• 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.

• View your reports

• 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.”

When to use and when not 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

• Don’t use a button when navigation is involved. Instead, use a link.
• If the button is used to toggle between 2 states, consider using a Toggle Switch instead.

See also

• Link vs button
• Typography
• Icon Button

External links

Here are some examples of other existing design systems:

• Lightning: buttons
• Polaris: button
• Material: designing buttons
• Material: component buttons
• Copy resource: UX Movement: 5 rules for choosing the right words on button label
• Copy resource: Polaris: Actionable language for buttons
• Copy resource: Gov.uk: Button
• Copy resource: UX Collective: UI cheatsheets (buttons)