GOV.UK elements Buttons

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

Contents:

Button text

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


  
    <input class="button" type="submit" value="Save and continue">

  

Start now button

Launch your service with a Start now button.


  
    <a class="button button-start" href="#" role="button">Start now</a>

  

Button alignment

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

Disabled buttons


  
    <input class="button" type="submit" value="Save and continue" disabled="disabled">

  

Creating buttons

Use the GOV.UK Sass button mixin – find this in the GOV.UK frontend toolkit buttons.scss file.

Button

  • #00823B
  • $button-colour

Focus

  • #FFBF47
  • $focus-colour

Discuss navigation buttons on the design patterns Hackpad