Button
ready

Introduction

These examples illustrate how buttons are used in the UIF.

Examples

Primary button

<button class="btn btn--primary">Button</button>

Secondary button

<button class="btn btn--secondary">Button</button>

Tertiary button

<button class="btn btn--tertiary">Button</button>

Circle/Icon button

<button class="btn btn--primary btn--circle"><i class='icon icon--facebook-white'></i></button>

Disabled button

<button class="btn btn--disabled">Button</button>

Block button

<button class="btn btn--primary btn--block">Button</button>

Block button (max medium breakpoint)

<button class="btn btn--primary btn--block btn--block-max-medium">Button</button>

Light button

This component is now deprecated and will be removed inv2.0.0.

<button class="btn btn--light">Button</button>

Large button

This component is now deprecated and will be removed inv2.0.0.

<button class="btn btn--primary btn--large">Button</button>

Default button

This component is now deprecated and will be removed inv2.0.0.

<button class="btn btn--primary">Button</button>

Small button

This component is now deprecated and will be removed inv2.0.0.

<button class="btn btn--primary btn--small">Button</button>

Extra small button

This component is now deprecated and will be removed inv2.0.0.

<button class="btn btn--primary btn--xsmall">Button</button>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/elements/_button.scss

Usage

Class/JavaScript Hook Description Required?
.btn Placed on a tag that will be used as a button Required.
.btn--primary Styles the button to use our primary colours Optional. Placed on the .btn element
.btn--disabled Shows the button as appearing disabled. Optional. Placed on the .btn element
.btn--secondary Styles the button to use our secondary colours Optional. Placed on the .btn element
.btn--tertiary Styles the button to use our tertiary colours Optional. Placed on the .btn element
.btn--light Light coloured button for use on blue or darker coloured backgrounds Optional. Placed on the .btn element
.btn--circle Makes a circle button Optional. Placed on the .btn element
.btn--large Makes the button large Optional. Placed on the .btn element
.btn--small Makes the button small Optional. Placed on the .btn element
.btn--xsmall Makes the button extra small Optional. Placed on the .btn element