Style Guide

Visit ncmg.com.au

Component

Buttons

Buttons come in all shapes and sizes, and they say a lot about the identity of a website. This article will discuss buttons and the various forms they come in.

Standard Buttons

Every button is designed to be wrapped inside a div (or other block element) of class .buttons. This wrapper aligns buttons beside each other, and prevents them from filling the available space horizontally. So, you might have markup that looks something like the following:

<div class="buttons">
  <a href="/" class="button">Send message</a>
</div>

Which would result in the following in the DOM:

Send message

Creating a Hierarchy

This is great, but sometimes buttons need a visual hierarchy. We want users to be drawn to particular buttons first, and we achieve this by deemphasizing elements as needed. Enter .button-secondary and .button-tertiary.

<div class="buttons">
  <a href="/" class="button">Save changes</a>
  <a href="/" class="button-secondary">Open file</a>
  <a href="/" class="button-tertiary">Cancel</a>
</div>
Save changes
Open file
Cancel

Adding an icon

All of the aforementioned buttons support icons out of the box, either as SVGs or as part of the Material Icons web font. Just be sure to wrap your message in a span.

<div class="buttons">
  <a href="/" class="button">
    <svg class="material-icons">...</svg>
    <span>Send message</span>
  </a>
</div>

Which would result in the following in the DOM:

Send message

Danger Variants

Each button also has a danger variant. Use this style when an action has potentially dangerous consequences.

<div class="buttons">
  <a href="/" class="button danger">Delete image</a>
  <a href="/" class="button-secondary danger">Rename item</a>
  <a href="/" class="button-tertiary danger">Cancel upload</a>
</div>
Delete image
Rename item
Cancel upload