Jump to main content

Overview

Buttons are clickable elements used to perform actions.

Anatomy

Anatomy of button component

Usage

When to use

  • To communicate actions that can be taken by the user, such as submitting a form or starting a process
  • To allow interactions

When not to use

  • When it’s not the main call to action of a page, consider using links to navigate the user to other pages.

Behaviour

Hover

On hover, the button background will look slightly darker to signal the user that the action is enabled.

Hovered buttons

Click/Interaction

On click, the button will perform the enunciated action.

Disabled

When the button is disabled, it will have a transparency of 50%. The cursor won’t change when the user hovers the button.

Disabled buttons

Processing

When a process is being carried out in the background, to indicate progress a spinning icon will replace the text of the button.

Button with processing status icon

Button Size

Buttons can be used in 3 sizes:

Default

This is the size most commonly used when vertical space is not a concern.

Default button size

Inline

Use this size to place a button after a line of inline text, as a CTA for example.

Inline button

Dense

To use in contexts where vertical space is limited, this size reduces the vertical padding.

Dense button

Small

If you are working with small text and need a suitably sized button, this size combines a small font size with a tighter padding.

Small buttons

Variants

Variant Description
Default Indicates a positive action that isn't necessarily the main call-to-action
Base Can be used to discreetly indicate a secondary action
Positive Indicates a positive action that is the main call-to-action
Negative Indicates a negative action that is destructive or permanent
Brand Can be used with the main colour of your brand

Default

Default button

Definition

A default button can be used to indicate a positive action that isn't necessarily the main call-to-action. Can be used in isolation or alongside a primary button.

Usage

When to use
  • To indicate a positive and/or less prominent action
  • For secondary actions when a primary button for the main action is present
  • For high emphasis actions when a base button is present
  • For main actions when next to a link
When not to use
  • Do not use as the main/prominent action when a primary button is also present
  • Do not use as a negative action
  • Do not use as a secondary action when a base button is present

Examples

ubuntu.com

Example of default button on Ubuntu website footer

Default button on Ubuntu website card

maas.io

Default button on MAAS website hero section

snapcraft.io

Default button on Snapcraft action toolbar

Default button with dropdown on Snapcraft snap pages

Default buttons in brand stores

Base

Base button

Definition

A base button can be used to discreetly indicate an action with less emphasis. It is often used alongside a default button.

Usage

When to use
  • For low emphasis actions
  • For secondary actions when a default or positive button for the main action is present
When not to use
  • Do not use as the main/prominent action when a default or primary button is also present
  • Do not use as a negative action

Examples

snapcraft.io

Example of base button in snapcraft action toolbar

Positive

Positive button

Definition

A positive button can be used to indicate a positive action that is the main call-to-action.

Usage

When to use
  • To indicate a positive and/or prominent action
  • For primary actions when other buttons or links are present
When not to use
  • Do not use as a negative action
  • Do not use as a secondary action
  • Avoid using using multiple positive buttons per screen

Examples

ubuntu.com

Example of positive button on Ubuntu website hero section

Example of positive button on Ubuntu website card

snapcraft.io

Example of positive button on Snapcraft action toolbar

Negative

Negative button

Definition

A negative button can be used to indicate a negative action that is destructive or permanent.

Usage

When to use
  • For destructive or permanent action. For example, to delete or remove user’s data.
When not to use
  • Do not use as a positive action

Examples

ubuntu.com

Example of negative button in modal to cancel subscription