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.
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 WebAIM:s 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.
- It's always recommended to use the html element
- If you use any other element, don't forget to add support for click, enter, and space interaction.
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.
Implement these five states for a button. Each state should have a separate color.
When choosing lighter or darker states: Keep in mind the contrast between button and background. Be consistent.
Text and icon
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.