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>

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" 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>