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 submit button with inverted colours

Input

= f.govuk_submit 'Find out more', inverse: true

<%= f.govuk_submit 'Find out more', inverse: true %>

Output

<button type="submit" formnovalidate="formnovalidate" class="govuk-button govuk-button--inverse" data-module="govuk-button" data-prevent-double-click="true">
  Find out more
</button>

Generating a submit button with a custom class

Input

= f.govuk_submit 'Big purple button', class: 'big-purple-button'

<%= f.govuk_submit 'Big purple button', class: 'big-purple-button' %>

Output

<button type="submit" formnovalidate="formnovalidate" class="govuk-button big-purple-button" data-module="govuk-button" data-prevent-double-click="true">
  Big purple 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

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>