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.
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
.
<!-- 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>
Choose a light outline button when placing the secondary button on a dark background colour by using class .btn-outline-light
.
<button type="button" class="qg-btn btn-outline-dark">Secondary button</button>
<button type="button" class="qg-btn btn-link">Tertiary button</button>
Use a loading spinner in a button to indicate there is a wait time while an action is occurring.
<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>