Buttons

All buttons MUST include role="button" as an attribute, exceptions for <input type="button" /> and <button>.

Standard button

<!-- Normal button start -->
<button class="button" type="button">Architecto reiciendis alias cum numquam</button>
<!-- Normal button end -->

Standard button class, can be applied to any element, including button and input.

<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>possimus quasi accusantium at accusamus</button>
<!-- Normal button (disabled) end -->

Standard button class, can be applied to any element, including button and input.

Ad delectus doloribus cupiditate necessitatibus
<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button">Qui ut voluptatem doloribus dolore</a>
<!-- Normal button end -->

Standard button class, can be applied to any element, including button and input.

CTA button

Dicta dolor
<!-- Call to action button start -->
<a href="#" class="button button--cta" role="button">Iste reiciendis</a>
<!-- Call to action button end -->

Modifier class, generally used in blocks of prose, must be combined with the base button class.

Inline button

Labore repudiandae vel aut eveniet
<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Et et in reiciendis et</a>
<!-- Inline button end -->

Modifier class, generally used inline with text or where space is an issue, must be combined with the base button class.

Small button

Necessitatibus est
<!-- Small button start -->
<a href="#" class="button button--small" role="button">Aliquam nulla</a>
<!-- Small button end -->

Modifier class, generally used in admin interfaces or intricate space limited layouts.

Neutral button

Odit deleniti id sed velit
<!-- Neutral button start -->
<a href="#" class="button button--neutral" role="button">Aut aut cupiditate eius quia</a>
<!-- Neutral button end -->

Modifier class, used in cases where buttons should not be dominant or are of secondary purpose, must be combined with the base button class.

Icon button

Quos consectetur mollitia assumenda necessitatibus
<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-light" role="button">Illum nam aperiam et laboriosam</a>
<!-- Icon button end -->

Can be used in combination with other modifier classes in order to create buttons with icons. The -light and -dark prefixes define the colour of the icons. Available icons can be found in _icons.scss.

Coloured buttons

Consectetur aspernatur doloremque ut voluptatibus

Similique et libero neque ipsa

Et veniam praesentium quos et

Quos et assumenda aut ratione

Ut deserunt quisquam magni similique

Neque odio dolores id ipsa

<!-- Coloured button start -->
<a href="#" class="button button--color-progress" role="button">Ipsa in sed sit repellat</a>
<!-- Coloured button end -->

Buttons can be colourized by using the button--color-{color} class. Currently available classes are scheme based - progress, conservatoires, postgraduate and teacher-training. Also available are light and heavy.

Standard button with flag

Beta Et et neque placeat aut

Beta Rem placeat a unde iure

Beta Ex sed quo molestiae unde

<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> In quasi hic autem voluptatem</a>
<!-- Normal button end -->

A flag can be used to highlight that a button is beta functionality, for example.

Button text should not exceed 18 characters to avoid the text breaking onto two lines on devices.