---
title: "Button — Usage"
canonical: https://sky-ui.cf.sky.com/components/button/usage
apiPackages: [{"name":"@sky-uk/ui-core","representedVersion":"13.2.0"}]
---

# Button — Usage

Buttons (also called CTAs – Call To Action) help users initiate actions.

## Basic Guidelines

### Copy

All Buttons must contain descriptive, actionable text “Add Sky Cinema” “Explore Sky Stream”. Generic text phrases such as "click" and "open" should be avoided as they provide the user with little information about where the Button will take the user. Where possible, Button text must be unique (i.e. don't have three "submit" buttons). Also, never use the word "button" in the descriptive text. Otherwise screen readers will announce "...button button".

Buttons should never run over two lines of copy.

## Variants Usage

### Disabled Buttons

Instead of disabling form submit Buttons until the user has entered valid/expected data, we recommend letting the user attempt submission and provide explicit feedback in response. This mitigates any potential accessibility issues that come with disabled Buttons, and allows the user to see the issues they need to amend before proceeding.

The disabled variant of the Button should only be used to display a loading status after the user has clicked on an active Button.

### Hierarchy

There are three variants of Buttons: Primary, Secondary, and Tertiary. The Primary variant should always be used as the single action that you want a user to take, after that main action, Secondary and Tertiary Buttons can be used to provide alternative actions.

## Icon Usage

In most cases, it is generally recommended to not include an icon within a Button, as it can often be very difficult to interpret them correctly and thus doesn’t always benefit the user.

An icon should only be used to provide **additional and clear context** to the copy within the CTA. It should not be added purely for aesthetics. Icons within Buttons need to be illustrative of the action that’s going to happen when the user uses the Button.

Ideally, icons should only be used in specific cases relating to a recognisable action. I.E. Downloading files, opening links in a new page/tab, adding items to a basket, adding items to a compare list.

**Please note: Only regular icons should be used, not inverted icons.**

## Alignment

On Mobile devices and when sat within a component, the button should span the full width of the viewport, minus any margins.

On Tablet and Desktop viewports, all Buttons should align with the grid. If there are two or more Buttons next to each other, each of the Buttons should be the same width.

Both the Primary and Secondary Buttons are taking up three columns each on the Desktop Grid.

### Spacing

#### Vertical

When stacking Buttons vertically, a 16px gap ensures that each item has enough room.

#### Horizontal

Horizontal Buttons match the gutter on the respective viewport, which is 24px on large viewports.