UI cheat sheet: buttons

My favourite design element is the buttons. In fact, I [insert swear word of your choice] love buttons. In this cheat sheet, we will go through different types of buttons, states, and interactions. For the purpose of this story, we will be ignoring radio buttons, tabs, checkboxes, and other types of buttons — we will just be looking at ‘normal’ buttons.

What we will cover in this cheat sheet:

1. Button actions
2. Common button styles
3. Button colours & styling
4. Button states and feedback
5. Button labelling
6. Touch targets
7. Button positions
8. Button hall of fame
9. Closing thoughts

1. Button actions

In this section, we will look at the hierarchy of buttons and the language that they communicate. Button actions are not determined by how they look (although users should be able to learn what the buttons mean by their styling), but rather by how they are used.

1. Call to action (CTA / C2A)

A call to action button, depending on the situation, will usually prompt users to sign up/register/buy now/etc. CTA buttons should be used where the platform wants to strongly suggest something that the user should do.

For CTA buttons I like to use rounded buttons as they are striking and eye-catching.

2. Primary action

While a CTA button and a primary button can look the same, I like to separate them out. While CTA buttons are what the interface would want you to do, primary buttons should be a strong visual indicator to help the user to complete their journey. Primary buttons should be used in situations where the user may want to go ‘next’, ‘complete’, ‘start’, etc.

For primary actions, I like to use solid buttons.

3. Secondary action

Secondary buttons are the ‘go back’ to the primary button’s ‘next’, or the ‘cancel’ button to the ‘submit’ button. Secondary buttons are the alternative we give users to the primary action.