Skip to main content
  1. Home
  2. Button helpers

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.

Input

= govuk_button_to 'A button', '#'
<%= govuk_button_to 'A button', '#' %>

Output

<form class="button_to" method="post" action="#">
  <input class="govuk-button" type="submit" value="A button" />
</form>

When using buttons for navigation, we usually want a link styled like a button instead.

Input

Output

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>