Some thoughts on primary buttons

I’ve recently been ranting a lot about primary buttons. But people often don’t understand what they are. In my early days as a designer, I thought it meant adding the class ‘btn-primary’ to my markup, and this is a common mistake.

In the land of user centred design, buttons and links are not interchangeable. The problem is, a lot of people make this mistake and litter the Internet with bad design. That is confusing for the people that use it. Some of my early contributions are still out there causing a nuisance. Sorry.

Well, buttons should trigger actions. Buttons should interact with data. If you’re submitting a form or deleting a comment, then a button is what to use. This is because you are taking data and doing something with it. Sending it, deleting it, saving it.

Links are a means of navigating between pages. You usually navigate to a form using a link, then submit it using a button. If you’re using the following in your markup, it’s almost certain that you’re doing it wrong.

<a class=“btn”></a>

This leads me onto primary buttons. A primary button is the action that the user is most likely to want to complete. For example, if I’m filling in a contact form, the primary action should be to submit it. Putting too many buttons on a page is more likely to slow me down or cause me to make mistakes.

If there is more than one button, this increases the amount of thinking required by the user. If there is more than one button of the same colour, this increases it even more.

It’s unlikely you will ever end up in a situation where you have two buttons of equal importance. If you do, it means you have too many things on the page, or you’re not framing it correctly. Sometimes, thinking about the content a little harder will make designing much easier.

As always, I’m happy to talk about this more if you’re interested.