Buttons

Buttons are calls to action that are used to direct users to related pages.

Rules for buttons

These buttons must be used only within main body of a page; they must not be used in asides.
Buttons must not be used mid-sentence. They must always appear on their own line separated from written content.
Buttons linking to downloadable content must use the icon button option.

Primary button

Primary buttons are used on all pages with the primary blue palette theme.

Primary

Code

<a type="button" class="btn btn-lg btn-primary" href="#">Primary</a>

Secondary and tertiary buttons

Secondary and tertiary buttons are used on pages currently using the secondary and tertiary palette themes.

Secondary Tertiary 1 Tertiary 2 Tertiary 3

Code

<a type="button" class="btn btn-lg btn-secondary" href="#">Secondary</a>
<a type="button" class="btn btn-lg btn-tertiary-1" href="#">Tertiary 1</a>
<a type="button" class="btn btn-lg btn-tertiary-2" href="#">Tertiary 2</a>
<a type="button" class="btn btn-lg btn-tertiary-3" href="#">Tertiary 3</a>

Label buttons

Label buttons must be used only on forms and other tasks that involve a user completing a task. For further information on the application of buttons in forms, see the form elements pattern.

Success Info Warning Danger

Code

<a type="button" class="btn btn-lg btn-success" href="#">Success</a>
<a type="button" class="btn btn-lg btn-info" href="#">Info</a>
<a type="button" class="btn btn-lg btn-warning" href="#">Warning</a>
<a type="button" class="btn btn-lg btn-danger" href="#">Danger</a>

Icon buttons

An icon button must be used when the button action is to download a file.
An associated font awesome icon to the downloadable file must be included in the button.

PDF document ZIP file Word document Powerpoint presentation

Code

<a type="button" class="btn btn-lg btn-primary" href="#">PDF document <i class="fa fa-file-pdf-o" title="PDF"></i></a>
<a type="button" class="btn btn-lg btn-primary" href="#">ZIP file <i class="fa fa-file-zip-o" title="ZIP"></i></a>
<a type="button" class="btn btn-lg btn-primary" href="#">Word document <i class="fa fa-file-word-o" title="Word"></i></a>
<a type="button" class="btn btn-lg btn-primary" href="#">Powerpoint presentation <i class="fa fa-file-powerpoint-o" title="Powerpoint"></i></a>