Buttons

Button elements are used primarily for actions such as “Submit”, “Close” or “Download”. Links can be styled like buttons, using the following classes below, but they should be visually differentiated from buttons. For example, good practice would be adding an icon to the styled link

Primary Buttons

<button class="button button-primary">Primary Button</button>
<button class="button button-secondary">Secondary Button</button>
<button class="button button-tertiary">Tertiary Button</button>

Outlined Buttons

<button class="button button-primary-outline">Primary Outline</button>
<button class="button button-secondary-outline">Secondary Outline</button>
<button class="button button-tertiary-outline">Tertiary Outline</button>

Rounded Buttons

To give buttons a subtle rounded shape that adheres to brand standards the .rounded class can be added to the button classes

<button class="button button-primary rounded">Primary Button</button>
<button class="button button-secondary rounded">Secondary Button</button>
<button class="button button-tertiary rounded">Tertiary Button</button>
<button class="button button-primary-outline rounded">Primary Outline</button>
<button class="button button-secondary-outline rounded">Secondary Outline</button>
<button class="button button-tertiary-outline rounded">Tertiary Outline</button>

Buttons with Icons

<button class="button button-primary">Primary Outline <i class="icon-right icon-chevron-right" aria-hidden="true"></i></button>
<button class="button button-secondary">Secondary Outline <i class="icon-right icon-arrow-right" aria-hidden="true"></i></button>
<button class="button button-primary-outline"><i class="icon-left icon-cog-open" aria-hidden="true"></i> Primary Outline</button>
<button class="button button-secondary-outline"><i class="icon-left icon-plus" aria-hidden="true"></i> Secondary Outline</button>

Button Variants

<button class="button button-inverse-white">Primary Outline </button>
<button class="button button-inverse-orange">Secondary Outline</button>