Form elements - Buttons

Use buttons to help users carry out an action on a page like starting an application or saving their progress.

Buttons should be used in situations where a user might need to preform an action, such as:

• Submitting a form
• Uploading
• Specify a next or previous step in a process
• Begin a new task

Icons should only be used where it is deemed absolutely necessary to communicate the meaning of an action.

We have six buttons

• primary button
• secondary button
• call-to-action button
• start button
• destructive button
• white button on solid background colour (reverse button)

Primary button

<button class="hs2-button" type="submit">
  Save and continue
</button>

<button class="hs2-button hs2-button--disabled" type="submit">
  Disabled
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  "text": "Save and continue"
}) }}


{{ button({
  "text": "Disabled",
  "classes": "hs2-button--disabled"
}) }}

What does it do?

• Gives users alternative to the call to action button.

When to use it?

When action is not as important as a call to action so it shouldn't call as much attention. When a button typically indicates actions that are important but not the call to action on a page. Can be used in isolation or in conjunction with call to action button and secondary.

When not to use it?

• When a button is essential for continuing the user journey
• When a button is a destructive action
• When a button starts a process or journey

Secondary button

<button class="hs2-button hs2-button--secondary" type="submit">
  Find my location
</button>

<button class="hs2-button hs2-button--secondary--disabled" type="submit">
  Disabled
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  "text": "Find my location",
  "classes": "hs2-button--secondary"
}) }}

{{ button({
  "text": "Disabled",
  "classes": "hs2-button--secondary--disabled"
}) }}

What does it do?

• Indicates action that is less important than call to action primary.
• When used together with call to action and primary button it creates visual hierarchy.
• Highlights an inessential action.

When to use it?

• To indicate lower priority than call to action and primary button.
• To create a clear hierarchy of priority and importance of actions.
• When a button is inessential for continuing the user journey.
• Use the Dark background variant when a Secondary button will be used against a background with a dark colour, such as primary blue.

When not to use it?

• When you need a strong visual indicator to help user to complete their journey and do their task.
• When a button is essential for continuing the user journey
• When a button is a destructive action
• When a button starts a process or journey

Call to action button

<button class="hs2-button hs2-button--call-to-action" type="submit">
  Call to action
</button>

<button class="hs2-button hs2-button--call-to-action--disabled" type="submit">
  Disabled
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  "text": "Call to action",
  "classes": "hs2-button--call-to-action"
}) }}

{{ button({
  "text": "Disabled",
  "classes": "hs2-button--call-to-action--disabled"
}) }}

What does it do?

• Encourages the most desired action you want visitors to take.
• Attracts attention on the page.

When to use it?

• When you need a strong visual indicator to help user to complete their journey and do their task.
• When you need action oriented button. Think: 'Done', 'Save', 'Next', 'Submit'.
• Use the Dark background variant when a Call to action button will be used against a background with a dark colour, such as primary blue.

When not to use it?

• What action you want users to take is not essential in completing their task.
• When a button is a destructive action.
• When a button starts a process or journey.

Start button

<button class="hs2-button hs2-button--start" type="submit">
  Start
</button>

<button class="hs2-button hs2-button--start--disabled" type="submit">
  Disabled
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  "text": "Start",
  "classes": "hs2-button--start"
}) }}

{{ button({
  "text": "Disabled",
  "classes": "hs2-button--start--disabled"
}) }}

What does it do?

• Shows that the button starts a process or journey

When to use it?

• When a button starts a process or journey

When not to use it?

• When a button is a destructive action
• When a button is trying to attract the user's attention
• When the button is inessential for continuing the user journey

Destructive button

<button class="hs2-button hs2-button--destructive" type="submit">
  Cancel
</button>

<button class="hs2-button hs2-button--destructive--disabled" type="submit">
  Disabled
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  "text": "Cancel",
  "classes": "hs2-button--destructive"
}) }}

{{ button({
  "text": "Disabled",
  "classes": "hs2-button--destructive--disabled"
}) }}

What does it do?

• Shows that the button's action deletes or removes something;

When to use it?

• When an action is destructive Example: cancelling an action, deleting an account;

When not to use it?

• When a button starts a process or journey;
• When a button is trying to attract the user's attention

White button on solid background colour (reverse button)

<button class="hs2-button hs2-button--reverse" type="submit">
  Save and continue
</button>

<button class="hs2-button hs2-button--reverse--disabled" type="submit">
  Disabled
</button>

{% from 'button/macro.njk' import button %}

{{ button({
  "text": "Save and continue",
  "classes": "hs2-button--reverse"
}) }}

{{ button({
  "text": "Disabled",
  "classes": "hs2-button--reverse--disabled"
}) }}

What does it do?

• A button to use on dark backgrounds

When to use it?

• When there's not enough contrast to use the primary button

When not to use it?

• On complex images

Try not to have multiple buttons on a single page. Follow GOV.UK guidance on One thing per page.

How to use buttons

The GOV.UK Design System suggests using a button to help users carry out an action on a page like starting an application or saving their progress.

Write button text in sentence case and describe the action the button performs. For example "Save and continue" or "Start now".