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 --><buttonclass="button"type="button">Quia aut quidem occaecati illum</button><!-- Normal button end -->
<!-- Normal button (disabled) start --><buttonclass="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.
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.
@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.
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.
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.
<buttonclass=" 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 --><ahref="#"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 start --><ahref="#"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.
<!-- Normal button start --><ahref="../nojs.html"class="button"role="button"title="This is Beta functionality."><spanclass="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 --><divclass="buttons-joined"><buttonclass="button">Provider</button><buttonclass="button">Course</button><buttonclass="button button--active icon-inline--left icon--map-marker-dark">Map</button><buttonclass="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.