[component] Buttons

Overview

Buttons are clickable elements used to perform actions.

Anatomy

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.

hover|300x217.28

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

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 size

Inline

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

Dense

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

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.

Processing

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

processing

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

maas.io

snapcraft.io

default brand store

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

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

positive ubuntu desktop

snapcraft.io

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

Brand

brand button

Definition

A brand button can be used with the main colour of a brand.

Usage

When to use

  • To indicate a positive 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
1 Like