Buttons

Primary

Primary buttons should be used if the button is the primary action you want the user to take within a section of a page.

  <button class="button">...</button>
  

Secondary

Secondary buttons should be used if you want to discourage the user taking the action. This will mostly be the case when there is already an action that is a primary button in the section of the page where the new action is being added. The secondary buttons achieve this by being less visible than the primary buttons thus giving the primary buttons more importance.

  <button class="button button--secondary">...</button>
  

Link

Link buttons should be used for actions you want to present to the user but don't necessarily want to encourage the user to take. An example of this would be a ‘cancel’ action.

  <button class="button button--link">...</button>
  

Light

Light buttons should be used on dark backgrounds.

  <button class="button button--light">...</button>
  <button class="button button--light-secondary">...</button>
  <button class="button button--light-link">...</button>
  

Full Width

A .button--stretch modifier can be used to make a button span the full width of it's parent container.

  <button class="button button--stretch">...</button>
  

Button Group

Groups of two or more buttons should be wrapped in a .button-group block. This block ensures that there is always an appropriate amount of white space between each button.

  <button class="button button--link">...</button>
  

Icon Button

Icon buttons are used specifically for buttons which contain only an icon. These should only be used in limited circumstances, such as a close button on a dialog.

  <a href="#" class="button-icon"><i class="material-icons">close</i></a>