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

Illo placeat minima nam dolorem

Standard button class, can be applied to any element, including button and input.

<!-- Normal button start -->
<button class="button" type="button">Magnam id commodi accusantium qui</button>
<!-- Normal button end -->
<!-- Normal button (disabled) start -->
<button class="button" type="button" disabled>aut nemo ut est possimus</button>
<!-- Normal button (disabled) end -->

Smaller buttons

Used on more complex screens: speak to UX for advice.

Fuga rerum Ut rerum Ea maiores
<!-- Small button start -->
<a href="#" class="button button--small" role="button">Placeat cumque</a>
<!-- Small button end -->

Expanded button

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

Vel quia praesentium quis tempora

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="id75d143ecb4">
  <button class="button" type="button">Mollitia</button>
  <button class="button" type="button">Est</button>
  <button class="button button--secondary" type="button">Magnam quia</button>
</div>
<!-- Multiaction button end -->
<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "right"}' id="id53bb91a9a3">
  <button class="button" type="button">Expedita</button>
  <button class="button" type="button">Quia</button>
  <button class="button button--secondary" type="button">Qui reprehenderit</button>
</div>
<!-- Multiaction button end -->

Single, solitary multiaction button.

<!-- Multiaction button start -->
<div data-multiaction-button='{"position": "left", "orientation": "vertical", "hideLabel": true}' id="id2ed3ef9e9d">
  <button class="button" type="button">Et</button>
  <button class="button" type="button">Qui adipisci</button>
  <button class="button button--secondary" type="button">Provident</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="id83940e15ac">
  <button class="button" type="button">Eum repellendus</button>
  <button class="button" type="button">Atque</button>
  <button class="button button--secondary" type="button">Fuga qui</button>
</div>
<!-- Multiaction button end -->

Multiaction buttons in tables.

Ullam non Totam ut doloribus sit eaque magni Temporibusquoset Eum laboriosam Account status Actions
Quis distinctio Recusandae rerum enim Perspiciatis et atque
Illo veniam Pariatur voluptates odio Voluptas quam

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="idc73d459cd9">
  <button class="button" type="button">Voluptas recusandae</button>
  <button class="button" type="button">Ut</button>
  <button class="button button--secondary" type="button">Explicabo</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

Vero molestiae qui eos magni  Veniam cumque velit sit officia  Suscipit facilis fugit eius sed minima quas nesciunt repellendus

<!-- Inline button start -->
<a href="#" class="button button--inline" role="button">Consequuntur quasi culpa earum 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

Aut neque et quas cum
<!-- Icon button start -->
<a href="#" class="button icon-inline--right icon--filter-dark" role="button">Tempora quaerat eos atque officia</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.

Qui aut dignissimos accusamus non
<!-- Icon button start -->
<a href="#" class="button icon-inline--left icon--filter-dark" role="button">Laudantium in deserunt pariatur nemo</a>
<!-- Icon button end -->

Left aligned variant using the icon-inline--left modifier.

Buttons with flag

Beta Ut nemo nihil ducimus ea

Beta Tempora officiis ipsam est nesciunt

Beta Velit facilis eos nam ipsum

<!-- Normal button start -->
<a href="../nojs.html" class="button" role="button" title="This is Beta functionality."><span class="button-flag">Beta</span> Beatae suscipit assumenda natus fugit</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.