Buttons

Buttons allow users to perform an action or to navigate to another page. In general, they call users’ attention to what needs to be done.

Our buttons

  • Use action verbs
  • Are short and crystal clear
  • Have no brackets, no slashes. In case you're not sure about the number, use plural; see more about the grammatical number

When crafting the button's copy, check if the text makes sense after both Would you like to…? (where the product speaks) as well as I would like to… (where the user speaks).

Do

Don’t

Button for confirmation modals

If the context or the headline of the flow leaves clear what element (widget, feed, search, etc) the action is referring to, you can omit the name of the element in the button.

null

It's clear from the headline what the user is saving so there's no need to repeat the word "Search".

Wizard buttons

We use Next and Finish when setting up something, for example listening or labels, via wizard.

Buttons for creating and adding items

Structure of creation and addition button:

[plus icon] - [action verb] - [object]

  • Create Shop Clerk
  • Add profile
  • Create project

Do

Don’tDo not use "new"

Buttons in Publisher

So far, buttons in Publisher can get more complicated as clicking one button could lead to various results (publishing, scheduling posts or saving posts as a draft all at once).

⚠️ It's an exception that shouldn't be followed anywhere else!