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

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

<!-- Normal button start -->
<button class="button" type="button">Quia aut quidem occaecati illum</button>
<!-- Normal button end -->
<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>dicta non et praesentium ipsum</button>
<!-- Normal button (disabled) end -->

Smaller buttons

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

Quia quis Numquam corporis Qui est
<!-- Small button start -->
<a href="#" class="button button--small" role="button">Quo autem</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).

Inverse order (occassionally, there may be a UX reason for inversing the order).

Small variant of groups of actions.

Modifier to move the group to the inline end.
buttons__inline-end

Previous and next buttons

This pattern allows a user to easily move between pages that are connected in sequence. For example, in the Application to move on to the next page of questions, or in other multiple page forms.

The mobile version is optimised for smaller screens and stretches the hit box across the width of the screen for easy single hand use.

No changes to default tabindex should be made.

Standard

The standard version of the Previous / Next navigation includes page titles to give the users context and clarity about which pages they are navigating between.

No titles

In some instances it will not be possible to use the page titles alongside the direction labels. In these cases use the no titles variant.

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="id7c79326d0a">
  <button class="button" type="button">Lorem ipsum</button>
  <button class="button" type="button">Dolor</button>
  <button class="button button--secondary" type="button">Sit amet</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "right"}' id="id1cd73547c2">
  <button class="button" type="button">Lorem ipsum</button>
  <button class="button" type="button">Dolor</button>
  <button class="button button--secondary" type="button">Sit amet</button>
</div>
<!-- Multiaction button end -->

Single, solitary multiaction button.

<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "left", "orientation": "vertical", "hideLabel": true}' id="id13c584d7c3">
  <button class="button" type="button">Lorem ipsum</button>
  <button class="button" type="button">Dolor</button>
  <button class="button button--secondary" type="button">Sit amet</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="id59e115923f">
  <button class="button" type="button">Lorem ipsum</button>
  <button class="button" type="button">Dolor</button>
  <button class="button button--secondary" type="button">Sit amet</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="id6af91b229f">
  <button class="button" type="button">Lorem ipsum</button>
  <button class="button" type="button">Dolor</button>
  <button class="button button--secondary" type="button">Sit amet</button>
</div>
<!-- Multiaction button end -->

Disabled multiaction button.

<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "position": "left"' id="id9c72bc6949" data-multiaction-button-disabled='true'>
  <button class="button" type="button">Lorem ipsum</button>
  <button class="button" type="button">Dolor</button>
  <button class="button button--secondary" type="button">Sit amet</button>
</div>
<!-- Multiaction button end -->

Multiaction button with disabled button.

<!-- Multiaction button with disabled start -->
<div data-multiaction-button='{"orientation": "vertical", "position": "left"' id="idfdb9c66179">
  <button class="button" type="button">Aut</button>
  <button class="button" type="button" disabled>Debitis</button>
  <button class="button button--secondary" type="button">Est</button>
</div>
<!-- Multiaction button with disabled end -->

Multiaction buttons in tables.

Labore incidunt Et cum odio ipsa aperiam explicabo Temporibusquoset Hic id Account status Actions
Nam a In voluptate velit Dolorem aspernatur dicta
Est perspiciatis Rerum magnam qui Voluptas possimus

To enable the multiaction buttons to break out of the responsive-table div (which has overflow: hidden; on it), an extra wrapping div with the class layout-scope has been added around the table.

<!-- Multiaction button start -->
<div data-multiaction-button='{"small": true, "position": "right"}' data-multiaction-button-label=Edit id="idc86ef16ab0">
  <button class="button" type="button">Lorem ipsum</button>
  <button class="button" type="button">Dolor</button>
  <button class="button button--secondary" type="button">Sit amet</button>
</div>
<!-- Multiaction button end -->

Legacy layout-scope test

Autem aut Aliquam quam qui dolorum sit delectus Temporibusquoset Facere possimus Account status Actions
Similique et Accusamus accusamus reprehenderit Ut fugit qui
Voluptatibus dolorem Vero aut maiores Fugit ab

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.

Favourites button

There are five variations of favourite SVG

Size Not favourited Favouriting Unfavouriting Favourited
data-favourite-state none favouriting unfavouriting favourite
Small Add .... to favourites Adding Removing Remove .... from favourites
Large
Suggested Text Add .... to favourites Adding Removing Remove .... from favourites

<a href="#" class="button button--favourite" role="button" aria-busy="false" data-favourite-state="none">Add .... to favourites</a>

<a href="#" class="button button--favourite" role="button" aria-busy="true" data-favourite-state="favouriting" disabled="disabled">Adding</a>

<button class=" button button--favourite button--favourite-large" aria-busy="true" data-favourite-state="unfavouriting" disabled="disabled">Removing</button>

<button class=" button button--favourite button--favourite-large" aria-busy="false" data-favourite-state="favourite">Remove .... from favourites</button>

''

Favourites cycled examples

The small favourite cycled through the five SVG with 1.5 second interval

The large favourite cycled through the five SVG with 1 second interval

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

Quidem maxime sit omnis dolorum rerum corporis accusantium facere illum repudiandae dignissimos  Voluptatum nesciunt sed sunt magnam  Hic beatae consequatur voluptatem ut nihil est modi accusamus

<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Fugiat nihil et quibusdam 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.

Icon button

Corrupti harum fugit autem nesciunt
<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-dark" role="button">Aut dicta ut maxime et</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.

Voluptatum necessitatibus aliquam repellendus id
<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-dark" role="button">Possimus sunt ullam dicta rem</a>
<!-- Icon button end -->

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

Buttons with flag

Beta Distinctio eum asperiores id veniam

Beta Assumenda corrupti maiores consequuntur sed

Beta Et beatae sapiente illo est

<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> A eos sed reiciendis aliquid</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 -->

Button chic

See Page layout with centred content for an example.

<div class="buttons">
  <button class="button button--primary button--chic" id="button1" aria-describedby="text-this-button-relates-to">Yes</button>
  <button class="button button--secondary button--chic" id="button2" aria-describedby="text-this-button-relates-to">No</button>
</div>

Default

With items-inline-center

With items-inline-spaced

Button text and button link

(to be used standalone)

(can be used inline)

<button class="button button--text">.button--text</button>
<button class="button button--link">.button--link</button>