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">Et ratione nisi qui nisi</button><!-- Normal button end -->
<!-- Normal button (disabled) start --><buttonclass="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.
@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.
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 --><ahref="#"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.
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> 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 --><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.