Buttons

A button clearly communicates what action will occur when the user touches it. It consists of text, an icon, or both, designed in accordance with the web site it’s on.


A click on something that looks like a button should affect the service more than just navigating to a new page. It can be a form that is sent, a sorting or a search. Exceptions can be done if a button converts better than a link in a particular case or vice versa.

Download buttons for Photoshop (.psd)

Download buttons for Sketch (.sketch)

DO'S & DON'TS

  • Buttons should have short texts, which describes the button action clearly.
  • Strive to keep the same text size on buttons as body text nearby.
  • The color contrast of text or icons on buttons should be adequate. You can check this in the Color contrast checker.
  • The buttons should have comprehensible names so that screen readers can interpret what they do.
  • Symbol buttons should have a visually hidden label for assistive technology to interpret.
  • Don't use uppercase if the button texts are long. It makes the text harder to read.

Three types

Default button: Used for important functions, such as call to actions.

Ghost button: Can be used when the button is not the primary action.

Symbol button: Used when the icon is simple and easily understood, and no text is necessary. For example in the video player and carousels.

Example

States

Implement these five states for a button. Each state should have a separate color.

Default button

Ghost button

Symbol button

Follow the SVT color palette and focus guidelines when choosing colors for different states.

When choosing lighter or darker states: Keep in mind the contrast between button and background. Be consistent.

Variants

Size

Text and icon

Full width

The standard size for a button is medium, with a height of 34 pixels. The buttons should be easy to press in a touch device. Small buttons are meant to be used where space is limited, for example as navigation tags on SVT Play.

Buttons should normally be rounded. Square buttons can be used if there’s a strong need. In that case, they should be used consistently on the site.