Primary button
Button text should be short and describe the action the button performs.
Back to components
Buttons
Use buttons to move though a transaction, aim to use only one button per page.
Contents
Example
Start now
HTML Snippet for primary button
<a class="btn btn-primary btn-arrow" href="#">Start now</a>Button alignment
Align the primary action button to the left edge of your form, in the user’s line of sight.
Example
HTML Snippet for button alignment
<div class="form-group">
<label class="form-label" for="full-name">Full name</label>
<input class="form-control" id="full-name" type="text" name="full-name">
</div>
<div class="form-group">
<button class="btn btn-primary" href="#">Save and continue</button>
</div>Button with external link
For accessibility, external links external link should include rel="external" and <span class="sr-only">External link</span>.
HTML Snippet for button with external link
<a rel="external" class="btn btn-primary btn-arrow" href="#">Search for a property band <span class="sr-only">External link</span></a>