Buttons
Buttons
Buttons can be used to show the user’s choice of options for actions and
assign these to a clear hierarchy.
assign these to a clear hierarchy.
Instructions
In the default state of the buttons, we apply combinations of three main color choices*. In the hover state, we apply the color magenta.
* Important note: We do not use more than two button shades on the same page.
* Important note: We do not use more than two button shades on the same page.
- Variants: Primary, secondary, text link
- State: Default, hover, disabled
- Size: Large, small
- Label: Edit the displayed button text
- Optional Left icon: With icon choice (only left or right, not both)
- Optional Right icon: With icon choice (only left or right, not both)
Buttons color proposals
Primary large
Primary small
Secondary large
Secondary small
Text link