Skip links and keyboard navigation

SWE components

Buttons

On this page

Overview

Buttons make common actions more obvious and help users more easily perform them. Buttons use labels to communicate the action that will occur when the user interacts them.

Primary

View example in Storybook

Choose the size of the buttons by using classes .btn-lg for larger buttons and .btn-sm and .btn-xs for smaller buttons.

Create block level buttons which span the full width of a parent by adding .btn-block .

Code

<!--
  Green: <button type="button" class="qg-btn btn-primary">
  Blue: <button type="button" class="qg-btn btn-secondary">
  Grey: <button type="button" class="qg-btn btn-default">
  Navy: <button type="button" class="qg-btn btn-global-primary">
  White: <button type="button" class="qg-btn btn-global-primary-white">
-->

<button type="button" class="qg-btn btn-default">Primary button green</button>

Secondary

Choose a light outline button when placing the secondary button on a dark background colour by using class .btn-outline-light.

View example in  Storybook

Code

<button type="button" class="qg-btn btn-outline-dark">Secondary button</button>

Tertiary

View example in Storybook

Code

<button type="button" class="qg-btn btn-link">Tertiary button</button>

With a loading spinner

Use a loading spinner in a button to indicate there is a wait time while an action is occurring.

  • Disable the button when the loading spinner is visible (while the loading is occurring).
  • The button label should accurately explain the action that is occurring. For example, “Submitting”, “Saving”, “Downloading”, “Processing”.
  • The loading spinner should be the same colour as the button label.

View example in Storybook

Code

<button type="button" class="qg-btn btn-primary" disabled>
  <span class="spinner-border" role="status">
    <span class="sr-only" role="status">Submitting</span>
  </span> 
  Submitting
</button>
Last updated:
28 June 2024