Button

Buttons

Buttons represent a clear action for a user to perform.

How to use

Buttons use the button element and the variant is controlled by class name e.g. button-primary.

Variants

Primary

Primary buttons are used sparingly on the site, reserved for links to higher-profile content like in a hero component.

Secondary

The secondary and disabled button styles are not in use at all, but may be handy if forms are created in the future.

Tertiary

Disabled

The secondary and disabled button styles are not in use at all, but may be handy if forms are created in the future.

<!-- Primary -->
<button class="button-primary">Primary button</button>

<!-- Secondary -->
<button class="button-secondary">Secondary button</button>

<!-- Tertiary -->
<button class="button-tertiary">Tertiary button</button>

<!-- Disabled -->
<button class="button-disabled">Disabled button</button>

<button class="{{ className }}">{{ text }}</button>
/* Primary */
{
  "className": "button-primary",
  "text": "Primary button"
}

/* Secondary */
{
  "className": "button-secondary",
  "text": "Secondary button"
}

/* Tertiary */
{
  "className": "button-tertiary",
  "text": "Tertiary button"
}

/* Disabled */
{
  "className": "button-disabled",
  "text": "Disabled button"
}