Skip to main content

GOV.UK elements
Buttons

GOV.UK Elements has now been replaced by the GOV.UK Design System

GOV.UK Elements:

is no longer maintained
will only be updated for major bug fixes and security patches
does not meet the Web Content Accessibility Guidelines (WCAG 2.1 level AA) accessibility standard

This framework will remain available in case you’re currently using it. To help your service meet accessibility requirements, you should use the GOV.UK Design System. You can migrate to the Design System from GOV.UK Elements.

GOV.UK elements Buttons

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

Contents:

Button text
Start now button
Button alignment
Disabled buttons
Creating buttons

Button text

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


  
    <button class="button" type="submit">Save and continue</button>

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

don’t disable buttons, unless there’s a good reason to
if you have to disable buttons, make sure they look like you can’t click them (use 50% opacity)
use the aria-disabled attribute for older screen readers
an example of a useful disabled option is a calendar with greyed out days where no bookings are available
provide another way for the user to continue, add an error message or text to explain why the button is disabled


  
    <button class="button" type="submit" disabled="disabled" aria-disabled="true">Save and continue</button>

Creating buttons

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

Discuss navigation buttons on Dropbox Paper