BETA This is a new service — your feedback will help us to improve it.

Back to components


Use buttons to move though a transaction, aim to use only one button per page.

Primary button

Button text should be short and describe the action the button performs.

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.


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 class="form-group">
    <button class="btn btn-primary" href="#">Save and continue</button>

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>
Back to top