Button - Usage

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.

Use descriptive copy where space allows.

Avoid using repetitive/vague copy and never run copy over more than one line.

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.

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.

Sky Glass. The only TV with Sky inside.

Sky Glass from £XX a month + £XX a month for Sky TV

Try to always have one primary button per section of content

Sky Glass. The only TV with Sky inside.

Sky Glass from £XX a month + £XX a month for Sky TV

Avoid having multiple primary Buttons

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.

Use descriptive copy where space allows.

Do not use icons that might confuse the user or that have little to no relation to the copy of the CTA.

Do not change the colour of the icon to be different from the colour of the copy within the Button.

Do not use solid icons within the CTA. Only linear icons should be used.

Alignment

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

Sky Sports

Learn more

Legal copy

£XX a month

18 month contract

Buttons should have their width set to fill, aligning with the rest of the content on the page.

Sky Sports

Learn more

Legal copy

£XX a month

18 month contract

Do not set a Button to hug, or centre align, even if the rest of the content is centre aligned.

Sky Glass. The only TV with Sky inside.

Sky Glass from £XX a month + £XX a month for Sky TV

Buttons should have their width set to fill, following the margins for the grids of that page.

Sky Glass. The only TV with Sky inside.

Sky Glass from £XX a month + £XX a month for Sky TV

Do not set a Button to hug, or centre align, even if the rest of the content is centre aligned.

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

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

This is the rule for all Button types including Tertiary.