Skip to main content
  1. Home
  2. Submit button

Submit button

Submit buttons submit the contents of the form

By default double click prevention is enabled to make applications easier to use by people using slow internet connections or suffering from motor impairments.

Generating a submit button using the default parameters

Input

= f.govuk_submit
<%= f.govuk_submit %>

Output

<button type="submit" formnovalidate="formnovalidate" class="govuk-button" data-module="govuk-button" data-prevent-double-click="true">
  Continue
</button>

Generating a secondary submit button

Input

= f.govuk_submit 'Find address', secondary: true
<%= f.govuk_submit 'Find address', secondary: true %>

Output

<button type="submit" formnovalidate="formnovalidate" class="govuk-button govuk-button--secondary" data-module="govuk-button" data-prevent-double-click="true">
  Find address
</button>

Generating a warning submit button

Input

= f.govuk_submit 'Delete all records', warning: true
<%= f.govuk_submit 'Delete all records', warning: true %>

Output

<button type="submit" formnovalidate="formnovalidate" class="govuk-button govuk-button--warning" data-module="govuk-button" data-prevent-double-click="true">
  Delete all records
</button>

Generating a submit button with custom class

Input

= f.govuk_submit 'Special button', classes: 'special-button-class'
<%= f.govuk_submit 'Special button', classes: 'special-button-class' %>

Output

<button type="submit" formnovalidate="formnovalidate" class="govuk-button special-button-class" data-module="govuk-button" data-prevent-double-click="true">
  Special button
</button>

Generating a submit button without double click prevention

Input

= f.govuk_submit prevent_double_click: false
<%= f.govuk_submit prevent_double_click: false %>

Output

<button type="submit" formnovalidate="formnovalidate" class="govuk-button" data-module="govuk-button">
  Continue
</button>

Generating a disabled submit button

Input

= f.govuk_submit 'Disabled button', disabled: true
<%= f.govuk_submit 'Disabled button', disabled: true %>

Output

<button type="submit" formnovalidate="formnovalidate" disabled="disabled" class="govuk-button govuk-button--disabled" data-module="govuk-button" data-prevent-double-click="true">
  Disabled button
</button>

A group of buttons

Some forms have secondary as well as primary functions. Any content passed in as a block will be rendered in-line with the primary submit button.

Input

= f.govuk_submit 'Save and continue' do
  a.govuk-button.govuk-button--secondary href='/#'
    ' Safe as draft
  button.govuk-button.govuk-button--warning Delete and start again
  a.govuk-link href="#"
    ' View recent changes
<%= f.govuk_submit 'Save and continue' do %><a class="govuk-button govuk-button--secondary" href="/#">
    Safe as draft 
  </a><button class="govuk-button govuk-button--warning">Delete and start again</button>
  <a class="govuk-link" href="#">
    View recent changes 
  </a><% end %>

Output

Safe as draft View recent changes
<div class="govuk-button-group">
  <button type="submit" formnovalidate="formnovalidate" class="govuk-button" data-module="govuk-button" data-prevent-double-click="true">
    Save and continue
  </button>
  <a class="govuk-button govuk-button--secondary" href="/#">
    Safe as draft 
  </a>
  <button class="govuk-button govuk-button--warning">
    Delete and start again
  </button>
  <a class="govuk-link" href="#">
    View recent changes 
  </a>
</div>

Related information