Call to action
On this page
Style
A call to action is text in a container or paired with an icon that directs users to new pages. Depending on the link, content, and hierarchy, a call to action can be used on its own or grouped with other calls to action.
Anatomy
- Text label
- Container
- Icon
Color scheme
Calls to action are available in both light and dark color schemes.
Light scheme
Dark scheme
Variants
Brick
The Brick variant may display an icon positioned to the left or on top of text.
Video
Calls to action may include a video icon.
Desaturated
Desaturated calls to action are white and are only available in the dark scheme. Secondary is not included because it looks exactly the same.
Space
Space values in calls to action do not change even if viewport sizes change. To see space values when calls to action are grouped, go to the Guidelines page.
Interaction states
To see live interaction states, go to the Demos page.
Hover
Call to action styles change slightly on hover.
- Primary - only the background color changes
- Secondary - the border disappears and the text and background colors invert
- Tertiary - both the text and icon color change
Focus and active
Focus and Active state styles are the same.
Other libraries
To learn more about our other libraries, visit this page.
Feedback
To give feedback about anything on this page, contact us.