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
Ut deserunt quisquam magni similique
<!-- 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
<!-- 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.