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

Voluptates id enim asperiores sed

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 -->

Smaller buttons

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 -->

Primary action group

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:

Standard action group

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:

Groups of actions

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.

Previous and next buttons

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.

Header with actions

@todo

Chameleon button

@todo button which changes depending on context, e.g. from Edit to Save/Cancel.

Multiple action button

@todo Some sort of widget/drop-down/cog with various secondary actions.

Combined form element and button

@todo Combined selection and action, to clarify that the action is dependent on the selection and to save space.

Call-to-action button

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 -->

Call-to-action button with border

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 -->

CTA with external link

<!-- Call to action button start -->
<a href="#" class="button button--cta ext" role="button">Quasi sunt<span></span></a>
<!-- Call to action button end -->

CTA button with image

Et qui
<!-- 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 -->

CTA button with video

These video buttons are experimental. They should be considered proof of concept only.

Tempora quod
Tempora quod

Inline button

Vel 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

Est nostrum beatae suscipit sit
<!-- 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.

Buttons with flag

Beta Consequatur inventore sunt fuga rerum

Beta Minus qui doloremque aut debitis

Beta 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.