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">Incidunt ut velit odio quia</button>
<!-- Normal button end -->
<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>rerum rerum vero est sed</button>
<!-- Normal button (disabled) end -->
Used on more complex screens: speak to UX for advice.
At quos Impedit adipisci Molestias quasi<!-- Small button start -->
<a href="#" class="button button--small" role="button">Beatae nihil</a>
<!-- Small button end -->
button--grow will increases the width of the button to 100% of its container.
Velit illum enim architecto sapiente
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="iddfcdf79f55">
<button class="button" type="button">Sunt</button>
<button class="button" type="button">Odit</button>
<button class="button button--secondary" type="button">Earum quo</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "right"}' id="ida669599b89">
<button class="button" type="button">Ut soluta</button>
<button class="button" type="button">Modi</button>
<button class="button button--secondary" type="button">Natus</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "left", "orientation": "vertical", "hideLabel": true}' id="id6f1d325f73">
<button class="button" type="button">Maxime nesciunt</button>
<button class="button" type="button">Voluptatem</button>
<button class="button button--secondary" type="button">Et quis</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"orientation": "vertical", "hideLabel": true, "small": true, "position": "left", "compact": true}' id="idc78072dc04">
<button class="button" type="button">Quaerat fuga</button>
<button class="button" type="button">Aut autem</button>
<button class="button button--secondary" type="button">Et</button>
</div>
<!-- Multiaction button end -->
Atque ipsam | Autem necessitatibus dolores qui tenetur natus | Temporibusquoset Odit id | Account status | Actions |
---|---|---|---|---|
Dignissimos ut | Aut ducimus dolor | Quod voluptas nisi | Unverified |
|
Omnis ea | Accusamus et maxime | Dolorum possimus | 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="id20d60b9f12">
<button class="button" type="button">Accusamus dolorum</button>
<button class="button" type="button">Est modi</button>
<button class="button button--secondary" type="button">Et</button>
</div>
<!-- Multiaction button end -->
@todo Combined selection and action, to clarify that the action is dependent on the selection and to save space.
Aut eveniet earum omnis voluptatibus Quo et quam quia qui Et voluptas aut sit autem nihil
<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Sed animi numquam corporis sed</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">Rerum animi eius reprehenderit autem</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.
Incidunt totam quasi aut ipsam<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-dark" role="button">Tenetur aut qui praesentium nobis</a>
<!-- Icon button end -->
Left aligned variant using the icon-inline--left modifier.
Inventore rerum consequuntur illo ut
Quibusdam ducimus quos veniam nihil
<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> Optio suscipit qui est ut</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.