GOV.UK elements Buttons
Use buttons to move though a transaction. Aim to use only one button per page.
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>
Align the primary action button to the left edge of your form, in the user’s line of sight.
- 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-disabledattribute 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>
Use the GOV.UK Sass button mixin – find this in the GOV.UK frontend toolkit buttons.scss file.