Buttons
All buttons MUST include role="button" as an attribute, exceptions for <input type="button" /> and <button>.
Wrap multiple buttons in a container with the class buttons
for consistent spacing even when pushed to multiple rows.
See the tables page for an example.
Standard button
<!-- Normal button start -->
<button class="button" type="button">Similique quidem tenetur sit dignissimos</button>
<!-- Normal button end -->
<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>vitae harum dolorem unde rerum</button>
<!-- Normal button (disabled) end -->
Standard button class, can be applied to any element, including button and input.
Sed tenetur dignissimos ea dicta<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button">Eligendi illo vel corrupti omnis</a>
<!-- Normal button end -->
Standard button class, can be applied to any element, including button and input.
CTA button
Natus quae<!-- Call to action button start -->
<a href="#" class="button button--cta" role="button">Harum nisi</a>
<!-- Call to action button end -->
Modifier class, generally used in blocks of prose, must be combined with the base button class.
Example of multiple CTA buttons
Vel alias Accusantium libero Occaecati estCTA button with external link
Eum nesciunt<!-- Call to action button start -->
<a href="#" class="button button--cta ext" role="button">Tempore incidunt</a>
<!-- Call to action button end -->
Modifier class, generally used in blocks of prose, must be combined with the base button class.
Inline button
Tempora ab architecto harum omnis<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Et beatae rerum non laudantium</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
Aspernatur quas<!-- Small button start -->
<a href="#" class="button button--small" role="button">Id odio</a>
<!-- Small button end -->
Modifier class, generally used in admin interfaces or intricate space limited layouts.
Neutral button
Ea non et aut quidem<!-- Neutral button start -->
<a href="#" class="button button--neutral" role="button">Et animi quo sapiente non</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
Ea eligendi sit rerum rerum<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-light" role="button">Qui sit ducimus odio quisquam</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.
Ut minus quae earum repellendus<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-light" role="button">Aut et nostrum voluptatem eum</a>
<!-- Icon button end -->
Left aligned variant using the icon-inline--left modifier.
Coloured buttons
Generally, buttons won't need a specific colour class as they will pick up their colour from the scheme.These are to be used rarely.
Consequatur ratione ea ipsam ut
Quia expedita iusto reprehenderit rerum
Magni quisquam incidunt et enim
Atque non doloremque at quibusdam
<!-- Coloured button start -->
<a href="#" class="button button--color-progress" role="button">Occaecati temporibus quisquam possimus suscipit</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.
Buttons with flag
Nesciunt quia aperiam quos quaerat
Dolores dolores enim enim quam
<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> Explicabo asperiores sed minima recusandae</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.