Button
About
A Button allows users to take an action. Riverty Design System offers a primary button and a secondary button. They both come in large and small sizes, and can come with an icon left or right from the label.
Anatomy
A Radio button consists of a:
- Background
- Label
- Border
- Icon (optional)
When to use Buttons
Buttons should be used if users need to be able take an action. Examples are:
- Confirm or Cancel input;
- Go to the next page or back to the previous page;
- Start a payment process;
- Etc.
When not to use Buttons
- When users should select a choice instead of take an action.
Behaviour
States
A Button, both primary, secondary and text, comes with the following states:
- Enabled
- Hovered
- Focused
- Activated
- Disabled
Keyboard behaviour
- Users are able to activate a button using the Enter key.
Content
A primary action should always placed to the right if there’s a secondary action as well. Therefore, the recommendation is to place a secondary button to the left of a primary button.
Write concise but clear Button labels, preferably consisting of one, two max three words.
