responsive mode

Buttons

Simple elements that enable a user to register an action.


Primary action buttons

The primary action button is the main action a user needs to complete on the page. There should only ever be one primary action button on a page.

Add Car

Default

Add Car

Hover State

Disabled State


Secondary action buttons

The secondary action is the next important action on the page. There can be multiple secondary action buttons on any one page.

History check

Default

History check

Hover State

Disabled State

Inactive state


Secondary action buttons with icon

The secondary action is the next important action on the page. There can be multiple secondary action buttons on any one page.

Upload Selfie

Hover State

Disabled State

Inactive state


Tertiary action buttons

The tertiary is similar to the secondary action. We use this on darker backgrounds where the primary and secondary buttons don't fit.

History check

Default

History check

Hover State

Disabled State

Inactive state




Fixed width button

A fixed width button works similarly to the fixed height conveersation buttons, only these buttons have fixed width instead of fixed height.

Default


Full width button

A button with 100% width.

Default


Button sizes

Simply add a class of 'large' or 'small' to alter the size.

Large buttons

Apply Now

Primary

Apply Now

Secondary

Small buttons

Sign in

Primary

Sign in

Secondary


Square button

This button is used when we want to remove the border radius on our other buttons, so that we get a squared off button.

Squared off

Default


Text only button

Text only buttons are used when we need to make a button appear like a link. For example, if we need it to submit a form.

Just text

Default