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
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.
Code
<button type="button" class="qg-btn btn-outline-dark">Secondary button</button>
Tertiary
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.
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>