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

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

<!-- Normal button start -->
<button class="button" type="button">Et ratione nisi qui nisi</button>
<!-- Normal button end -->
<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>accusamus dolor et aliquam saepe</button>
<!-- Normal button (disabled) end -->

Smaller buttons

Used on more complex screens: speak to UX for advice.

Odio numquam Error voluptatem Corporis dolorem
<!-- Small button start -->
<a href="#" class="button button--small" role="button">Occaecati consequatur</a>
<!-- Small button end -->

Expanded button

button--grow will increases the width of the button to 100% of its container.

button--grow can be used with content columns to create a group of consistent buttons.

A link button

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

This could be used in areas where there are a lot of options for a user to choose from but they are all variations of the same task. For example a download button where the dropdown gives options to download as a pdf, as an excel doc etc.

From a usability point of view, this type of button should only be used in conjunction with other buttons. Placing it near other actions will make it clearer what it is for. Also be careful not to hide really important functionality inside the dropdown.

Global bus messages:

UCASDesignFramework.bus.publish('df.multiactionButtons.init')
UCASDesignFramework.bus.publish('df.multiactionButtons.destroy')
UCASDesignFramework.bus.publish('df.multiactionButtons.hideAll')
// @param {string} id
UCASDesignFramework.bus.publish('df.multiactionButtons.hide', id)
UCASDesignFramework.bus.publish('df.multiactionButtons.show', id)
UCASDesignFramework.bus.publish('df.multiactionButtons.Disable', id)
UCASDesignFramework.bus.publish('df.multiactionButtons.Enable', id)
<!-- Multiaction button start -->
<div data-multiaction-button='' data-multiaction-button-label=More id="id5334cc4068">
  <button class="button" type="button">Dolorum dolor</button>
  <button class="button" type="button">Dolores</button>
  <button class="button button--secondary" type="button">Eos qui</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "right"}' id="id1ed08e2d68">
  <button class="button" type="button">Ut</button>
  <button class="button" type="button">Provident vero</button>
  <button class="button button--secondary" type="button">Delectus dolorem</button>
</div>
<!-- Multiaction button end -->

Single, solitary multiaction button.

<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "left", "orientation": "vertical", "hideLabel": true}' id="id7027bed2a4">
  <button class="button" type="button">Quam</button>
  <button class="button" type="button">At</button>
  <button class="button button--secondary" type="button">Consectetur culpa</button>
</div>
<!-- Multiaction button end -->

Single, solitary, small, compact multiaction button.

<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "left", "compact": true}' id="idb39c309521">
  <button class="button" type="button">Voluptatem</button>
  <button class="button" type="button">Odio quidem</button>
  <button class="button button--secondary" type="button">Cum explicabo</button>
</div>
<!-- Multiaction button end -->

Multiaction button with primary or standard

Multiaction buttons are by default secondary, but this can be overridden.

<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "right", "type": "standard"}' id="id67c396c3b3">
  <button class="button" type="button">Et</button>
  <button class="button" type="button">Laborum quia</button>
  <button class="button button--secondary" type="button">Unde</button>
</div>
<!-- Multiaction button end -->

Disabled multiaction button.

<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "position": "left"' id="id1aacc986a8" data-multiaction-button-disabled='true'>
  <button class="button" type="button">Autem</button>
  <button class="button" type="button">Asperiores amet</button>
  <button class="button button--secondary" type="button">Sint voluptatibus</button>
</div>
<!-- Multiaction button end -->

Multiaction buttons in tables.

Sint nostrum Incidunt deleniti id dolor qui molestias Temporibusquoset Et voluptatibus Account status Actions
Ea qui Eligendi odio consectetur Officia ipsa in
Molestiae quis Et perspiciatis non Est qui

Bug raised for z-index issue in tables: DF-783.

<!-- Multiaction button start -->
<div data-multiaction-button='{"small": true, "position": "right"}' data-multiaction-button-label=Edit id="id476873c6ac">
  <button class="button" type="button">Accusantium quo</button>
  <button class="button" type="button">Labore</button>
  <button class="button button--secondary" type="button">Incidunt libero</button>
</div>
<!-- Multiaction button end -->

API methods

UCASDesignFramework.multiactionButtons.init() // Initialise multiactionButtons plugin.
UCASDesignFramework.multiactionButtons.init($context) // Initialise multiactionButtons plugin.
UCASDesignFramework.multiactionButtons.init($context, $selector) // Initialise multiactionButtons plugin.

UCASDesignFramework.multiactionButtons.show($id) // Show multiactionButtons with ID.
UCASDesignFramework.multiactionButtons.show($node) // Show multiactionButtons with node.

UCASDesignFramework.multiactionButtons.hide($id) // Hide multiactionButtons with ID.
UCASDesignFramework.multiactionButtons.hide($node) // Hide multiactionButtons with node.

UCASDesignFramework.multiactionButtons.hideAll() // Hide all multiactionButtons.

UCASDesignFramework.multiactionButtons.disable($id) // Disable multiactionButtons with ID.
UCASDesignFramework.multiactionButtons.disable($node) // Disable multiactionButtons with node.

UCASDesignFramework.multiactionButtons.enable($id) // Enable multiactionButtons with ID.
UCASDesignFramework.multiactionButtons.enable($node) // Enable multiactionButtons with node.

Combined form element and button

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

Inline button

Ad sunt eveniet in porro eum minus voluptatum et inventore  Dolores dolor velit sit omnis  Eum odio rerum porro occaecati rerum laudantium perferendis

<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Quo consectetur cum dicta praesentium</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

Labore id tempore magnam omnis
<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-dark" role="button">Harum quis deleniti reprehenderit ut</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.

Et eum nihil optio perspiciatis
<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-dark" role="button">Doloribus quidem debitis optio ullam</a>
<!-- Icon button end -->

Left aligned variant using the icon-inline--left modifier.

Buttons with flag

Beta Non voluptatem aut repudiandae architecto

Beta Nihil cum aut sequi ullam

Beta Impedit dignissimos asperiores et quod

<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> Corporis voluptate voluptas architecto perferendis</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.

Joined button group

<!-- Joined button group start -->
    <div class="buttons-joined">
        <button class="button">Provider</button>
        <button class="button">Course</button>
        <button class="button button--active icon-inline--left icon--map-marker-dark">Map</button>
        <button class="button icon-inline--left icon--menu-dark">List</button>
    </div>
<!-- Joined button group end -->

Add a new section

An example of this is on the learner's education page.

Add a new section

<!-- Add section button start -->
<a href="#" class="button button--add-section" role="button">Add a new section</a>
<!-- Add section button end -->