Buttons

Buttons means buttons! Or does it? Buttons are a visual indication that clicking the item is important, it moves you through a process, or that it performs an action. As such, a button can really be a button, as in a form, or it could be an important link within a page that has had it's importance raised up beyond simple text.

Our button foundation follows Material guidelines as a basis for appearance and functionality.

Flat buttons

A rectangular button that whose text lightens on hover.

A flat button is a Material concept for a button which is 'printed' onto the material that it sits on i.e. it has no height. When they are interacted with, they do not lift, but do fill with a colour on hover and on press.

We use flat buttons in the following locations:

  • On toolbars
  • On cards, as actions

When in use as a set of action on cards, the modifier dense is provided to help align the buttons with the card content.

Examples

Standard

<button style="button button--flat"></button>

Standard flat buttons have a clear background. A flat button

Call to action

<button style="button button--flat button--cta"></button>

A flat button can be a call to action, and has the standard call to action colour as a background. Buy now!

Disabled

<button style="button button--flat button--disabled"></button>

A flat button which is disabled shows a shaded background, and has no interaction styles. Disabled

<button style="button button--flat button--dense"></button>

When buttons are used as actions within a card action area, they can have the modifier dense applied to them. This aids the alignment with the content in the main portion of the card.

Dense buttons can still have other relevant modifiers applied to them.

Raised buttons

<button style="button button--raised"></button>

A rectangular button that whose text lightens on hover.

A button that has the appearance of standing proud of the material that it sits on. On hover the button lightens. On press and focus, the button depresses back down to a flat state, in ine with the material it sits on.

We use raised buttons in the following locations:

  • As standalone elements
  • As actions in forms
  • In toolbars

Examples

Standard

<button style="button button--raised"></button>

Standard raised buttons use the primary brand colour as a background. A raised button

Call to action

<button style="button button--raised button--cta"></button>

A raised button can be a call to action, and has the standard call to action colour as a background. Buy now! The raised CTA is used to highlight the primary action we want the user to take on the page.

Disabled

<button style="button button--raised button--disabled"></button>

A flat button which is disabled shows a shaded background, and has no interaction styles. Disabled

Sized

<button style="button button--raised button--small"></button>
<button style="button button--raised button--full-width"></button>

By default, cards are sized according to their content. If required, cards can be sized manually.

Small

Full Width

Positioned

<button style="button button--raised button--centered"></button>

Buttons can be positioned centrally within a block.

Branded buttons

As with the raised buttons, a typically rectangular button that lightens on hover. It has a shadow underneath to add depth and depresses on click and focus. It includes a logo of the brand to the left of the text. Both are centered within the button at all times.

Varying tags

Because button styling is separated from structure, a number of tags can be used to create a button, such a anchor tags, button tags, or input tags.

<a href="#" style="button button--raised"></a>

A link

<button style="button button--raised"></button>

<input type="button" style="button button--raised" value="An input button">

<span style="button button--raised"></span>

A span