Buttons

Links go places. Buttons do things.

~anonymous

Buttons are components that allow users to navigate between states or actions. They’re different than links, because links move users from location to location within or outside the system.

When to use

  • Whenever triggering an event or action. Examples:
  • When navigating in a paginated set of data. We could use links to do this (arguably the user’s going to a new set of data) but because we AJAX the data into the page, to the user it looks more like an action than a transition to another place.

When not to use

  • When the user is navigating to another location. We have links for that, and they’ve got better accessibility built in for it.
  • In place of other form fields such as toggles or radio buttons. They’re difficult to code to behave accessibly, look dated (hello 2005!), and are more difficult to understand.
  • Just to draw attention to a call to action on the page. There are lots of ways to get a user to a CTA and a big red button isn’t always the answer.
  • In place of a tabset. Don’t use buttons instead of tabs – we invented tabs for that.