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>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--circle |
Makes a circle button | Optional. Placed on the .btn element |