Buttons

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

Eos ullam voluptate quo omnis

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 -->

Smaller buttons

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 -->

Expanded button

button--grow will increases the width of the button to 100% of its container.

Quam aut ullam autem repellat

button--grow can be used with content columns to create a group of consistent buttons.

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).

Small variant of groups of actions.

Previous and next buttons

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.

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.

<!-- 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 -->

Single, solitary multiaction button.

<!-- 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 -->

Single, solitary, small, compact multiaction button.

<!-- 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 -->

Multiaction buttons in tables.

Vitae laboriosam Officiis vel sed sit in et Temporibusquoset Iure eius Account status Actions
Autem eligendi Similique fugiat quia Debitis quas voluptatem
Illo saepe Aliquid praesentium dignissimos Architecto occaecati

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 -->

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

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

Minima qui ut quo id
<!-- 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.

Buttons with flag

Beta Numquam deleniti nam adipisci animi

Beta Laboriosam eveniet enim voluptas deserunt

Beta Impedit fuga aliquam quo quis

<!-- 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.