Buttons

New

Web accessibility guidelines

Use the following recommendations to develop a list for a CTA content block:

Make sure header tags are implemented in the correctorder on the page. Use Wave to visual reports.
Where multiple links share identical href attributes, ensure that the link text is identical. Alternatively, add an identical aria-label for all link that have the same href attribute.
Add aria-label with a short descriptive text to a links such as "Learn more" or "Read more".
Any link that opens a new tab or window should communicate this fact beforehand. Add (opens in a new tab) within the link text or aria label.

view aoda guidelines & implementation

PRIMARY BUTTON - LIGHT

Button

Small

Button

Medium

Button

Large

<a class="btn-primary btn-primary--light btn--s" href="#">Button</a>
<a class="btn-primary btn-primary--light btn--m" href="#">Button</a>
<a class="btn-primary btn-primary--light btn--l" href="#">Button</a>

Disabled

<button class="btn-primary btn-primary--light btn--l btn-primary--light" disabled>Button</button>

Secondary button - light

Button

Small

Button

Medium

Button

Large

<a class="btn-secondary btn-secondary--light btn--s" href="#">Button</a>
<a class="btn-secondary btn-secondary--light btn--m" href="#">Button</a>
<a class="btn-secondary btn-secondary--light btn--l" href="#">Button</a>

Disabled

<button class="btn-secondary btn-secondary--light btn--l" disabled >Button</button>

Tertiary Button - Light

Button

Small

Button

Medium

Button

Large

<a class="btn-tertiary btn--tertiary-light btn--s" href="#">Button</a>
<a class="btn-tertiary btn--tertiary-light btn--m" href="#">Button</a>
<a class="btn-tertiary btn--tertiary-light btn--l" href="#">Button</a>

Disabled

<button class="btn-tertiary btn-tertiary--light btn--l" disabled >Button</button>

Responsive Buttons

Large size on Desktop, Medium size on Tablet and Small size on Mobile - Resize the window to view it.

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

Full Width Buttons

Define full width buttons.

Buttons can be set to full with for specific breakpoints

- btn--w-full - Full width across all breakpoints
- btn--w-full--lg - Full width for desktop and up
- btn--w-full--md - Full width for tablet
- btn--w-full--sm - Full width for mobile landscape and down
- btn--w-full--xs- Full width for mobile portrait

<button class="btn-primary btn-primary--light btn--w-full">Button</button>
<button class="btn-primary btn-primary--light btn--w-full--lg">Button</button>
<button class="btn-primary btn-primary--light btn--w-full--md">Button</button>
<button class="btn-primary btn-primary--light btn--w-full--sm">Button</button>
<button class="btn-primary btn-primary--light btn--w-full--xs">Button</button>

PRIMARY BUTTON - DARK

Button

Small

Button

Medium

Button

Large

<a class="btn-primary btn-primary-dark btn--s" href="#">Button</a>
<a class="btn-primary btn-primary-dark btn--m" href="#">Button</a>
<a class="btn-primary btn-primary-dark btn--l" href="#">Button</a>

Disabled

<button class="btn-primary btn-primary--dark btn--l" disabled>Button</button>

SECONDARY BUTTON - DARK

Button

Small

Button

Medium

Button

Large

<a class="btn-secondary btn-secondary--dark btn--s" href="#">Button</a>
<a class="btn-secondary btn-secondary--dark btn--m" href="#">Button</a>
<a class="btn-secondary btn-secondary--dark btn--l" href="#">Button</a>

Disabled

<button class="btn-secondary btn-secondary--dark btn--l" disabled >Button</button>

TERTIARY BUTTON - DARK

Button

Small

Button

Medium

Button

Large

<a class="btn-tertiary btn-tertiary--dark btn--s" href="#">Button</a>
<a class="btn-tertiary btn-tertiary--dark btn--m" href="#">Button</a>
<a class="btn-tertiary btn-tertiary--dark btn--l" href="#">Button</a>

Disabled

<button class="btn-tertiary btn-tertiary--dark btn--l" disabled >Button</button>