Button helpers
In addition to the components, this gem also comes with button helpers that are frequently duplicated and reimplemented across projects.
Regular button
The govuk_button_to
helper wraps Rails’
button_to
directly, rendering a form that will POST
by default.
Link styled like a button
When using buttons for navigation, we usually want a link styled like a button instead.
Input
= govuk_button_link_to 'A link styled like a button', '#'
<%= govuk_button_link_to 'A link styled like a button', '#' %>
Output
<a class="govuk-button" href="#">
A link styled like a button
</a>
Other button styles
Disabled buttons
Disabled buttons are created using disabled: true
. They have poor
contrast and can confuse some users, so avoid them if possible.
Secondary buttons
Secondary buttons are created with secondary: true
. Pages usually have
one primary call to action so secondary buttons are used for other
operations.
Warning buttons
Warning buttons are created with warning: true
. They’re designed to make
users think carefully before they use them. They only work if used very
sparingly. Most services should not need one.
Input
.govuk-button-group
= govuk_button_link_to 'A disabled button', '#', disabled: true
= govuk_button_link_to 'A secondary button', '#', secondary: true
= govuk_button_link_to 'A warning button', '#', warning: true
<div class="govuk-button-group">
<%= govuk_button_link_to 'A disabled button', '#', disabled: true %>
<%= govuk_button_link_to 'A secondary button', '#', secondary: true %>
<%= govuk_button_link_to 'A warning button', '#', warning: true %>
</div>
Output
<div class="govuk-button-group">
<a class="govuk-button govuk-button--disabled" href="#">
A disabled button
</a>
<a class="govuk-button govuk-button--secondary" href="#">
A secondary button
</a>
<a class="govuk-button govuk-button--warning" href="#">
A warning button
</a>
</div>