Button

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

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "start",
  type: "submit",
  text: "Start"
}) }}

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "start",
  type: "submit",
  text: "Start"
}) }}

Use the default button for the most important action on a page. For example, the ‘Start’ button on a form’s start page. Only use one primary button per page to guide users to the main action.

Button as a link

<a class="asp-button asp-button--start" href="#">Start now</a>

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "start",
  href: "#",
  text: "Start now"
}) }}

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "start",
  href: "#",
  text: "Start now"
}) }}

Disabled button

Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.

Only use disabled buttons if research shows it makes the user interface easier to understand. disabled buttons should be used when an action is possible but not available, and should be styled differently from active buttons.

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

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "start",
  type: "submit",
  disabled: true,
  text: "Start"
}) }}

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "start",
  type: "submit",
  disabled: true,
  text: "Start"
}) }}

When to use this component

Use the button component to help users carry out an action like starting an application or saving their information.

How it works

Write button text in sentence case, describing the action it performs. For example:

• ‘Start now’ at the start of the service
• ‘Send sign in details’ to an account a user has already created
• ‘Log out’ when a user is signed in to an account

You may need to include more or different words to better describe the action. For example, ‘Send sign in details’.

Align the primary action button to the left edge of your form.

Secondary button

The secondary button is for less important actions and usually sits next to the primary button.

Avoid adding multiple secondary buttons to one page, as it can confuse users. Instead, try to simplify or spread content across multiple pages.

<button class="asp-button asp-button--secondary" type="button">Secondary action</button>

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "secondary",
  type: "button",
  text: "Secondary action"
}) }}

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "secondary",
  type: "button",
  text: "Secondary action"
}) }}

Warning button

Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.

<button class="asp-button asp-button--warning" type="reset">Delete</button>

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "warning",
  type: "reset",
  text: "Delete"
}) }}

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "warning",
  type: "reset",
  text: "Delete"
}) }}

Primary button

The blue button is not recommended for new designs. It has been used in some applications such as Formation Admin, but its purpose is unclear.

It was previously considered a secondary button but is coded as a primary button. Its future use is under review.

<button class="asp-button asp-button--primary" type="button">Download</button>

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "primary",
  type: "button",
  text: "Download"
}) }}

{% from "button/macro.njk" import aspButton %}

{{ aspButton({
  modifier: "primary",
  type: "button",
  text: "Download"
}) }}

Status of development

The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.

Published 3 May 2024
Last updated 10 December 2024