1. Government Frontend Component Guide
  2. Button

Component

Button

Use buttons to move though a transaction, aim to use only one button per page.

Button text should be short and describe the action the button performs.

This component is also extended for use in govspeak.

These instances of buttons are added by Content Designers, ideally this duplication would not exist but we currently don’t have shared markup via our components within the generated govspeak. (This is a challenge to the reader)

Search for usage of this component on GitHub

How it looks (preview all)

How to call this component

<%= render "govuk_publishing_components/components/button", {
  text: "Submit"
} %>

GOV.UK Design System

This component incorporates components from the GOV.UK Design System:

Accessibility acceptance criteria

The button must:

  • accept focus
  • be focusable with a keyboard
  • indicate when it has focus
  • activate when focused and space is pressed
  • activate when focused and enter is pressed
  • have a role of button
  • have an accessible label

Other examples

Link button (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "I'm really a link sssh",
  href: "#"
} %>

Link button target blank (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "I'm really a link sssh",
  href: "http://www.gov.uk",
  target: "_blank"
} %>

With type (preview)

Buttons default to having a type of submit, but in some cases it may be desirable to have a different type.

<%= render "govuk_publishing_components/components/button", {
  text: "Button type button",
  type: "button"
} %>

Start now button (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "Start now",
  href: "#",
  start: true,
  rel: "external"
} %>

Secondary button (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "Secondary button",
  secondary: true
} %>

Secondary quiet button (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "Secondary quiet button",
  secondary_quiet: true
} %>

Destructive button (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "Destructive button",
  destructive: true
} %>

Start now button with info text (preview)

Start now Sometimes you want to explain where a user is going to.
<%= render "govuk_publishing_components/components/button", {
  text: "Start now",
  href: "#",
  start: true,
  info_text: "Sometimes you want to explain where a user is going to."
} %>

With margin bottom (preview)

Sometimes it’s useful to break up a page, for example if a button is at the bottom of a page.

<%= render "govuk_publishing_components/components/button", {
  text: "Submit",
  margin_bottom: true
} %>

Extreme text (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "I'm a button with lots of text to test how the component scales at extremes.",
  href: "#"
} %>

Extreme text start now button (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "I'm a start now button with lots of text to test how the component scales at extremes.",
  start: true,
  href: "#"
} %>

With data attributes (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "Track this!",
  margin_bottom: true,
  data_attributes: {
    module: "cross-domain-tracking",
    "tracking-code": "GA-123ABC",
    "tracking-name": "transactionTracker"
  }
} %>

With title attribute (preview)

<%= render "govuk_publishing_components/components/button", {
  text: "Click me",
  margin_bottom: true,
  title: "A button to click"
} %>

Inline layout (preview)

Buttons will display adjacent to each other until mobile view, when they will appear on top of each other.

<button class="gem-c-button govuk-button gem-c-button--inline">First button</button>
<%= render "govuk_publishing_components/components/button", {
  text: "Second button",
  inline_layout: true
} %>

With name and value set (preview)

By default, the button has no value or name set so it will not pass information when the form is submitted. This allows a name and value to be added so a button can add information to the form submission.

Please note that Internet Explorer 6 and 7 have breaking bugs when submitting a form with multiple buttons - this can change what value is submitted by the button. Make sure to check your user needs and browser usage.

<%= render "govuk_publishing_components/components/button", {
  text: "This is the button text",
  value: "this_is_the_value",
  name: "this_is_the_name"
} %>