Skip to main content
GOV.UK Components for Ruby on Rails

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="#">
  <button class="govuk-button" data-module="govuk-button" new_tab="false" type="submit">
    A button
  </button>
</form>

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" data-module="govuk-button" href="#">
  A link styled like a button
</a>

Inverse buttons

Inverse buttons can be used to make buttons stand out on coloured backgrounds. They are frequently used on landing pages.

Input

= govuk_button_link_to('An inverse button', '#', inverse: true)
<%= govuk_button_link_to('An inverse button', '#', inverse: true) %>

Output

<a class="govuk-button govuk-button--inverse" data-module="govuk-button" href="#">
  An inverse 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" data-module="govuk-button" disabled="disabled" aria-disabled="true" href="#">
    A disabled button
  </a>
  <a class="govuk-button govuk-button--secondary" data-module="govuk-button" href="#">
    A secondary button
  </a>
  <a class="govuk-button govuk-button--warning" data-module="govuk-button" href="#">
    A warning button
  </a>
</div>