Buttons

Usage

Buttons communicate actions that users can take. They are typically placed throughout your website in places like Forms, Cards and Toolbars.

Types

1. Text Buttons
2. Icon Buttons
3. Dropdown Buttons

Anatomy

In most cases we recommend the following div and class structure.

.Button

.Button Body

Text Block

.Button Body Icon

Image

Theming

Use the following combo classes to customise this item.

Size

Target Class

Combo Classes

Description

.Button Body

is--xsm

is--sm

is--md

is--lg

Changes the button padding, text size, letter spacing and min height.

.Button

is--fluid

Allows button to adapt to 100% width of parent container.

Colour

Target Class

Combo Classes

Description

.Button

.Theme-1 T-A

.Theme-1 T-B

.Theme-1 T-C

.Theme-1 T-D

Changes the button colour variants.

Forms