Buttons

Standard button

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

<!-- Normal button start -->
<button class="button" type="button">Lorem ipsum dolor sit amet</button>
<!-- Normal button end -->

<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>Lorem ipsum dolor sit amet</button>
<!-- Normal button (disabled) end -->

Smaller buttons

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

Lorem ipsum Lorem ipsum Lorem ipsum

<!-- Small button start -->
<a href="#" class="button button--small" role="button">Lorem ipsum</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).

Submit Cancel

Help

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

Submit Cancel

Help

Small variant of groups of actions.

Submit Cancel

Help

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.

Previous Title of previous page

Next Title of next page

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="id8ea8ee7018">
  <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="idbc5ab7aa37">
  <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="ide55a187b78">
  <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="id7b9679d7be">
  <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="id517b21c27e">
  <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="id0211ebdc8e" 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="id105ecb7c7e">
  <button class="button" type="button">Proin ultricies</button>
  <button class="button" type="button" disabled>Diam</button>
  <button class="button button--secondary" type="button">Diam lacinia</button>
</div>
<!-- Multiaction button with disabled end -->

Multiaction buttons in tables.

Ipsum dolor	Dolor sit amet consectetur adipiscing elit	Temporibusquoset Sit amet	Account status	Actions
Amet consectetur	Consectetur adipiscing elit	Adipiscing elit curabitur	Unverified
Adipiscing elit	Elit curabitur aliquam	Curabitur aliquam	Unverified

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="id07878b16d8">
  <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

Aliquam ex	Ex vitae nibh pellentesque tincidunt ut	Temporibusquoset Vitae nibh	Account status	Actions
Nibh pellentesque	Pellentesque tincidunt ut	Tincidunt ut in	Unverified
Ut in	In justo enim	Justo enim	Unverified

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

Etiam eleifend nulla sed urna vulputate, ac venenatis nibh ornare Lorem ipsum dolor sit amet sed consequat dui sed arcu volutpat rutrum

<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Lorem ipsum dolor sit amet</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

Lorem ipsum dolor sit amet

<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-dark" role="button">Lorem ipsum dolor sit amet</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.

Lorem ipsum dolor sit amet

<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-dark" role="button">Lorem ipsum dolor sit amet</a>
<!-- Icon button end -->

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

Buttons with flag

Beta Lorem ipsum dolor sit amet

<!-- Normal button start -->
<a href="../../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> Lorem ipsum dolor sit amet</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>

Classes

.button
Standard buttons styles. Can be applied to button or a.
.buttonright
this moves the button right
.buttons
Groups of buttons.
.buttons__inlineend
Move a buttons__group to the right.
.buttonsinverseorder
Inverse order.
.buttonflag
A flag can be used to highlight that a button is beta functionality, for example.
.buttonsblock
@deprecated since version 3.0.0
.buttonclear
@deprecated since version 3.0.0

Not sure what to do?

Popular topics

Popular subjects

Standard button

Smaller buttons

Expanded button

Primary action group

Standard action group

Groups of actions

Previous and next buttons

Standard

No titles

Header with actions

Chameleon button

Multiple action button

Single, solitary multiaction button.

Single, solitary, small, compact multiaction button.

Multiaction button with primary or standard

Disabled multiaction button.

Multiaction button with disabled button.

Multiaction buttons in tables.

Legacy layout-scope test

API methods

Favourites button

Favourites cycled examples

Combined form element and button

Inline button

Icon button

Buttons with flag

Joined button group

Add a new section

Button chic

Default

With items-inline-center

With items-inline-spaced

Button text and button link

Classes