Skip to contentSkip to footer
Give feedbackv3.0.2

Buttons

Buttons (directions)

<button type="button" class="btn-light left-button-icon">Back</button>
<button type="button" class="btn right-button-icon">Continue</button>
<button type="submit" class="btn tick-button-icon">Submit</button>
<button type="button" class="btn search-button-icon">Search</button>

Buttons (directions alternative)

<button type="button" class="btn-white back-button-icon">Back</button>
<button type="button" class="btn-white left-cancel-button-icon">Cancel</button>

Buttons combined (directions alternative)

<button type="button" class="btn-white back-button-icon">Back</button>
<button type="button" class="btn right-button-icon">Continue</button>

Buttons (actions)

<button type="button" class="btn-secondary email-button-icon">Email</button>
<button type="button" class="btn-secondary print-button-icon">Print</button>
<button type="reset" class="btn-secondary restart-button-icon">Restart</button>
<button type="button" class="btn-secondary save-button-icon">Save</button>
<button type="button" class="btn-secondary spinner-button-icon">Loading...</button>

Buttons (additional)

<button disabled type="button" class="btn-disabled">Continue</button>
<button type="button" class="btn-success">Success</button>
<button type="button" class="btn-warning exclamation-button-icon">Warning</button>
<button type="button" class="btn-loading">Loading...</button>

Buttons (right)

<button type="button" class="btn-secondary btn-right print-button-icon">Print</button>

Buttons (small)


<button type="button" class="btn btn-small">Basic</button>
<button type="button" class="btn-light btn-small">Light</button>
<button type="button" class="btn-secondary btn-small">Secondary</button>
<button type="button" class="btn-white btn-small">White</button>
<button disabled="" type="button" class="btn-small">Disabled</button>
<button type="button" class="btn-success btn-small">Success</button>
<button type="button" class="btn-warning btn-small">Warning</button>

Buttons (group)

<div class="btn-group">
	<button type="button" class="btn">Left</button>
	<button type="button" class="btn">Middle</button>
	<button type="button" class="btn">Right</button>
</div>

Response recap buttons

Question one?
<div class="response">
	<div class="response--q">Question one?</div>
	<div class="response--a">
		<a class="btn-light btn-small">Answer</a>
	</div>
</div>