Styleguide › GOV.UK Elements

Buttons

Repo • Page source

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

Button text

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

<button class="button">Save and continue</button><button class="button button-secondary">Save and continue</button>
button.button Save and continue
button.button.button-secondary Save and continue

Launch your service with a Start now button. 


<button class="button button-get-started">Start now</button>
button.button.button-get-started Start now

Align the primary action button to the left edge of your form, in the user's line of sight.

Back 


<div class="form-group">
  <label class="form-label" for="email-address-1">Email address</label><input class="form-control" id="email-address-1" type="email" />
</div>
<div class="form-group">
  <p>
    <button class="button">Save and continue</button>
  </p>
  <p>
    <a href="#back">Back</a>
  </p>
</div>
div.form-group
label.form-label for="email-address-1" Email address
input#email-address-1.form-control type="email"
div.form-group
p
button.button Save and continue
p
a href="#back" Back

Disabled buttons

Disabled buttons should be set at 50% opacity.

<button class="button" disabled="">Primary button</button><button class="button button-secondary" disabled="">Secondary button</button>
button.button disabled="" Primary button
button.button.button-secondary disabled="" Secondary button