Skip to main content

Start button

Use a start button for the main call to action on your service’s start page.

Start buttons don’t usually submit form data, so they use a link tag rather than a button tag.

Start button

Input

= govuk_start_button(text: "Start now", href: "#")
<%= govuk_start_button(text: "Start now", href: "#") %>

Output

<a class="govuk-button govuk-button--start" data-module="govuk-button" draggable="false" role="button" href="#">Start now<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" /></svg></a>

Rendering a start button in a form

If you need to submit data you can make the component render a form containing a button instead of a link by passing as_button: true. This approach uses the Rails button_to helper and will render a form that will POST to the target URL.

WarningThe GOV.UK Design system advises against submitting data with a start button

Input

= govuk_start_button(text: "Start now", href: "#", as_button: true)
<%= govuk_start_button(text: "Start now", href: "#", as_button: true) %>

Output

<form class="button_to" method="post" action="#"><button class="govuk-button govuk-button--start" data-module="govuk-button" draggable="false" type="submit">Start now<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" focusable="false" aria-hidden="true"><path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" /></svg></button></form>