Button

When to use a button

Buttons must be actionable. Use a button when you want users to perform an action. For example, to sign in or submit information.

When not to use a button

Do not use a button to link to another page.

Our documentation previously suggested using an <a> element to turn a button into a link. You must now use the emphasised link component for when you need to make a link stand out.

Types of button

There are three button types:

• Primary
• Secondary
• Regular white

Which type you use should be based on how the button(s) will be used and not on how it looks.

Primary button

Use a primary button for the main call to action on a page.

You should avoid using multiple primary buttons on a single page. Having more than one main call to action reduces their impact and can confuse users.

The exception to this is where you have multiple actions of equal importance. For example, ‘accept’ and ‘reject’ in cookie banners.

<button class="btn btn-primary">Primary button</button>

Secondary button

Use a secondary button for the less important action on a page. For example, if you want to give users the option to ‘continue’ or ‘save and exit’, use a primary button for ‘continue’ and a secondary button for ‘save and exit’.

<button class="btn btn-secondary">Secondary button</button>

Regular white button

Use a regular white button when it needs to be displayed against dark coloured background. For example, deep purple or one of the house colours.

<button class="btn btn-white-regular">White regular button</button>

Button group

The button group class lets you place multiple buttons together and applies preset spacing between each button.

You should only use one primary button. For more information see the guidance about primary buttons.

<div class="p-button-group">
  <button class="btn btn-primary">Primary button</button>
  <button class="btn btn-secondary">Secondary button</button>
</div>

How to write good button text

Button text should be short. Try to keep it under 4 words.

Start button text with a verb (an action), for example, ‘Save and continue’.

Use sentence case, block capital letters are harder to read.

Other types of button

Other types of button are available in the code base and these are listed below. If you’re using any of these, please replace them with the buttons above.

• A element button
• Action button
• Blue regular button
• Blue solid button
• Danger accented button
• Danger regular button
• Danger solid button
• Deep purple regular button
• Deep purple solid button
• Disabled button
• Disabled a class button
• Dropdown button
• Full width button
• Icon button
• Light purple regular button
• Link button
• Mini button
• Purple regular button
• Purple solid button
• Slim button
• Toggle button
• View more button