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>

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>