Buttons

Use the button component to help users carry out an action like submitting a form or saving their information.

Default buttons

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

Avoid using multiple default buttons on a single page. Having more than one main call to action reduces their impact, and makes it harder for users to know what to do next.

<button class="button">
    Submit
</button>

Secondary buttons

Use secondary buttons for secondary calls to action on a page.

Pages with too many calls to action make it hard for users to know what to do next. Before adding lots of secondary buttons, try to simplify the page or break the content down across multiple pages.

<button class="button button--secondary">
    Reset
</button>

Warning buttons

Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly.

Only use warning buttons for actions with serious destructive consequences that cannot be easily undone by a user. For example, permanently deleting an account.

When letting users carry out an action like this, it’s a good idea to include an additional step which asks them to confirm it.

In this instance, use another style of button for the initial call to action, and a warning button for the final confirmation.

Do not only rely on the red colour of a warning button to communicate the serious nature of the action. This is because not all users will be able to see the colour or will understand what it signifies. Make sure the context and button text make clear what will happen if the user selects it.

<button class="button button--warning">
    Warning button
</button>

Disabled buttons

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.

<button disabled="disabled" aria-disabled="true" class="button button--secondary">
    Disabled button
</button>

Action buttons

Action buttons prompt users to continue to the next step of a journey or process.

Only use action buttons once per page.

<a href="#" class="button button--action" role="button" draggable="false">
  Start now
</a>

Grouping buttons

Use a button group when two or more buttons are placed together.

<div class="button-group">

    <button class="button">
        Register
    </button>

    <button class="button button--secondary">
        Reset
    </button>

</div>