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
Generating a secondary submit button
Input
= f.govuk_submit 'Find address', secondary: true
<%= f.govuk_submit 'Find address', secondary: true %>
Generating a warning submit button
Input
= f.govuk_submit 'Delete all records', warning: true
<%= f.govuk_submit 'Delete all records', warning: true %>
Generating submit button with inverted colours
Input
= f.govuk_submit 'Find out more', inverse: true
<%= f.govuk_submit 'Find out more', inverse: true %>
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' %>
Generating a submit button without double click prevention
Input
= f.govuk_submit prevent_double_click: false
<%= f.govuk_submit prevent_double_click: false %>
Generating a disabled submit button
Input
= f.govuk_submit 'Disabled button', disabled: true
<%= f.govuk_submit 'Disabled button', disabled: true %>
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
<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>