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 class, can be applied to any element, including button and input.
<!-- Normal button start -->
<button class="button" type="button">Sit qui in officiis nobis</button>
<!-- Normal button end -->
<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>quisquam iste necessitatibus sed amet</button>
<!-- Normal button (disabled) end -->
Used on more complex screens: speak to UX for advice.
Asperiores labore In voluptatem Deserunt atque<!-- Small button start -->
<a href="#" class="button button--small" role="button">Molestiae molestias</a>
<!-- Small button end -->
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.
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:
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:
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.
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.
@todo
@todo button which changes depending on context, e.g. from Edit to Save/Cancel.
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.
<!-- Multiaction button start -->
<div data-multiaction-button='' data-multiaction-button-label=More id="id420134ca9d">
<button class="button" type="button">Vero ipsa</button>
<button class="button" type="button">Minima aut</button>
<button class="button button--secondary" type="button">Ea</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "right"}' id="id661cef2fc8">
<button class="button" type="button">Inventore sunt</button>
<button class="button" type="button">Et explicabo</button>
<button class="button button--secondary" type="button">Eum</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "left", "orientation": "vertical", "hideLabel": true}' id="idaae78f7724">
<button class="button" type="button">Adipisci et</button>
<button class="button" type="button">Inventore aspernatur</button>
<button class="button button--secondary" type="button">Excepturi</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "left", "compact": true}' id="id36e2e1ea1e">
<button class="button" type="button">Corrupti</button>
<button class="button" type="button">Placeat</button>
<button class="button button--secondary" type="button">Fugit quidem</button>
</div>
<!-- Multiaction button end -->
Vitae laboriosam | Officiis vel sed sit in et | Temporibusquoset Iure eius | Account status | Actions |
---|---|---|---|---|
Autem eligendi | Similique fugiat quia | Debitis quas voluptatem | Unverified |
|
Illo saepe | Aliquid praesentium dignissimos | Architecto occaecati | Unverified |
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="id9aa432b65f">
<button class="button" type="button">Quos veritatis</button>
<button class="button" type="button">Consequatur non</button>
<button class="button button--secondary" type="button">Et ut</button>
</div>
<!-- Multiaction button end -->
@todo Combined selection and action, to clarify that the action is dependent on the selection and to save space.
Ut cupiditate est assumenda ex fuga magnam velit cupiditate Provident saepe fugiat quis eum Voluptas mollitia ut sint magnam omnis sint qui
<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Optio quasi voluptatem exercitationem placeat</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 -->
<a href="#" class="button icon-inline--right icon--filter-dark" role="button">Illo corrupti sequi omnis occaecati</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.
Aliquam exercitationem velit ad ut<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-dark" role="button">Animi incidunt et id dolorem</a>
<!-- Icon button end -->
Left aligned variant using the icon-inline--left modifier.
Numquam deleniti nam adipisci animi
Laboriosam eveniet enim voluptas deserunt
<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> Cupiditate velit quos velit voluptas</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.