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 class, can be applied to any element, including button and input.
<!-- Normal button start -->
<button class="button" type="button">Enim consequatur fuga sit sit</button>
<!-- Normal button end -->
<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>reprehenderit reiciendis magni nihil quo</button>
<!-- Normal button (disabled) end -->
Used on more complex screens: speak to UX for advice.
Labore ut Voluptate ut Non voluptas<!-- Small button start -->
<a href="#" class="button button--small" role="button">Non praesentium</a>
<!-- Small button end -->
The primary action group is used for actions that are paired when one of them is the primary action on the page.
Small variant of primary action group.
Used when the form is only one part of the page, not the whole purpose of the page.
Primary action is currently unavailable:
Both actions are currently unavailable:
The standard action group is used for actions that are paired when neither of them is the primary action on the page.
Small variant of standard action group.
One action is currently unavailable:
Both actions are currently unavailable:
Examples of what goes in the primary section (on the right) and what goes in the secondary section (on the left).
Small variant of groups of actions.
These are to be used in multistep forms.
They appear at the bottom of the visible form.
No changes to default tabindex should be made.
@todo
@todo button which changes depending on context, e.g. from Edit to Save/Cancel.
@todo Some sort of widget/drop-down/cog with various secondary actions.
@todo Combined selection and action, to clarify that the action is dependent on the selection and to save space.
Speak to UX for advice on when to use a CTA button.
Nesciunt asperiores<!-- Call to action button start -->
<a href="#" class="button button--cta" role="button">Vero aliquid<span></span></a>
<!-- Call to action button end -->
This is to be used on solid colour backgrounds where the standard button doesn't work.
<!-- Call to action button start -->
<a href="#" class="button button--cta button--cta-border" role="button">Quia nihil<span></span></a>
<!-- Call to action button end -->
<!-- Call to action button start -->
<a href="#" class="button button--cta ext" role="button">Quasi sunt<span></span></a>
<!-- Call to action button end -->
<!-- Call to action button start -->
<a href="#" class="button button--cta button--cta-with-image" role="button">Ullam dolores<span class="button__cta-image-wrapper"><span class="button__cta-image-mask"><span class="button__cta-image" style="background-image:url('https://www.ucas.com/sites/default/files/tiles/exhibitions-and-open-days.jpg')"></span></span></span></a>
<!-- Call to action button end -->
These video buttons are experimental. They should be considered proof of concept only.
Tempora quodVel reiciendis natus reiciendis culpa inventore qui error asperiores vero aut sint doloribus et Hic atque sed quibusdam non Voluptatibus nostrum eum ipsa sed
<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Sunt in cupiditate ut dolor</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.
<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-dark" role="button">Eveniet culpa accusantium et reiciendis</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.
Quam suscipit labore nam ab<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-dark" role="button">Qui dolorem non commodi odio</a>
<!-- Icon button end -->
Left aligned variant using the icon-inline--left modifier.
Consequatur inventore sunt fuga rerum
Minus qui doloremque aut debitis
Velit voluptatum aliquid ullam earum
<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> Praesentium harum voluptatem consequatur et</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.