An effective Call to Action must be clear and simple. Consumers should immediately understand what is expected of them.
Guidelines
Uses
Primary Button
- represents the main action or the most important task on a page or in a given context
- visually distinctive, generously sized, its color contrasts with the rest of the interface to attract the user's attention
- may be associated with a right arrow to indicate a next step in the journey
Secondary Button
- represents a less crucial action or an alternative option
- less vibrant color to indicate lower importance
- may be associated with a right arrow to indicate a next step in the journey
Tertiary Link
- represents an action of lower importance compared to primary and secondary buttons: used for less frequent or advanced actions
- simple text that can be associated with an icon on the left or right depending on the context
Interactions
All our CTAs have a +2px upward interaction on hover and a color change
Figma file
https://www.figma.com/file/6PnBnOIPI3w8NSsaXs3PAq/Molecules?type=design&node-id=0%3A1&mode=design&t=zOYCIhWAuuXJ7Dj0-1