Buttons

Default Button – .o-btn

The default button class sets up the defaults for the other modifiers to build upon. This is just used as a base and it should always have a second class associated with it to define the specific button type.

<a class="o-btn">Button</a>

Button Background Color Modifiers

The primary button design. This essentially the primary button style used on the website.

<a class="o-btn o-btn--primary">Button Primary</a>

Button secondary and tertiary Modifiers

The secondary button must be used on white background and the tertiary on grey.

<a class="o-btn o-btn--secondary">Button Secondary</a>
<a class="o-btn o-btn--tertiary">Button Tertiary</a>

Outline Button – .o-btn.o-btn--outline

Button style that provides an outline with highlighted hover/active state.

<a class="o-btn o-btn--outline">Button Outline</a>

Block Button – .o-btn.o-btn--block

This modifier makes the button expand to the full-width of it's parent container.

<a class="o-btn o-btn--primary o-btn--block">Button Block</a>

Button Link – .o-btnLink

Make a button visually look like a default link. Useful when we semantically want to use a button element but don’t want all the default styling that comes with it.

Should only be applied to button elements (as link elements should already be styled like this).

<a class="o-btnLink">Button Link</a>

Disabled Button – .o-btn.o-btn--disabled

<a class="o-btn o-btn--disabled">Button Disabled</a>