'Button' component

Component type	Atom
Component inclusions	n/a
Design source (in Figma)	Button component
Component status	https://rb-digital.atlassian.net/browse/DSD-1 https://rb-digital.atlassian.net/browse/DSD-139

Introduction

Buttons are clickable elements that are used to perform an action. Button contains a text label and a supporting icon can be displayed.

The label describes the action that will occur if a user interacts with it.

Button labels should use uppercase.
Button labels should be as short as possible, while clearly explaining the action the button triggers.
For maximum legibility, a text label should remain on a single line.
Names like “Read more“, “Learn more“, etc. should be avoided.

Buttons come with two sizes: large and small.

Buttons have five states that define their appearance: Default (by default), Hover, Focus, Active and Disabled.

Use a Button to enable actions or decisions that are important to a user, such as:
- submitting a form;
- confirming a change;
- triggering a new element to appear on the page;
- specifying a new or next step in a process.
Button can be used for actions, like ‘Load more’, ‘Filters’ etc.

Do not use buttons as navigational elements. Instead, use links when the desired action is to take the user to a new page (with the exception of the back and forward buttons).
Do not style Buttons as links.
Do not use leading and trailing icons at the same time.