Button

One primary action per page. Everything else is secondary or a link.

When to use

To submit a form or begin a service. Use a button element for actions and an a element styled as a button only for navigation, like the start button.

When not to use

For navigation between content pages. Use a link. People expect links to go somewhere and buttons to do something.

<div class="ag-button-group ag-mb-0">
  <button class="ag-button" type="button">Continue</button>
  <button class="ag-button ag-button--secondary" type="button">Save and come back later</button>
  <a class="ag-button ag-button--start" href="#button-example">Start now</a>
  <button class="ag-button ag-button--warning" type="button">Delete application</button>
  <button class="ag-button" type="button" disabled>Disabled</button>
</div>

Variants

• Primary, the default. The main action. Once per page.
• Secondary for the other action: save for later, cancel, back.
• Start for the first page of a service. It is a link, and it is bigger.
• Warning for destructive actions only. Always confirm on the next page.
• Block (ag-button--block) makes a button full width, useful on phones.
• Pill (ag-button--pill) gives a call to action fully round ends. It works with square or rounded corners. Use it for the one main action on a page, not every button.

<div class="ag-button-group ag-mb-0">
  <a class="ag-button ag-button--start ag-button--pill" href="#pill">Apply now</a>
  <a class="ag-button ag-button--secondary ag-button--pill" href="#pill">Check your status</a>
</div>

On a coloured background

On a primary, dark or accent band, and in a primary hero, a button takes the page colour so it stands out. A secondary button becomes an outline in the text colour. Put the main action first and give it the solid button.

<div class="ag-band ag-band--primary ag-mb-0">
  <div class="ag-container">
    <div class="ag-button-group ag-mb-0">
      <a class="ag-button" href="#button-band">Find your district</a>
      <a class="ag-button ag-button--secondary" href="#button-band">See the latest results</a>
    </div>
  </div>
</div>

Accessibility

• Buttons are 48px tall and have a visible border, so they survive forced-colours mode.
• Label with a verb: "Continue", "Submit application", "Delete". Never "Click here" or "OK".
• Avoid disabled buttons. They cannot receive focus and people cannot tell why. Let them submit and show an error instead.
• The focus state is yellow with ink text, the same as links, so people learn one signal.
• Set type="button" on any button that is not a submit, or it will submit the form.