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.

The 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>