CTA Link
A Call to Action link is a link that directs the user to another page or website where they can complete the desired action. Call to action link is often used for marketing purposes, such as increasing conversions, leads, or sales.
Anatomy
| State | Description | Required |
|---|---|---|
| Label | Concise and meaningful label allow the user to quickly understand where the link is navigating. | Yes |
| Chevron | Visual signifier for link. | Yes |
| Underline | Appears on hover and Pressed to reinforce visual signifier for link. | On hover and press |
| Icon | The icon should help reinforce the sentiment behind the message. It also serves as an additional element to help support the overall meaning. | Optional |
States
| State | Description |
|---|---|
| Default | Chevron to signify navigation |
| Hover | Underline animation to indicate link is hovered and signify navigation |
| Pressed | Heavy underline and animation to indicate link is pressed and signify navigation |
| Focus | A focus outline appears around visual element to help users identify current selected component. This is used when a user navigates using keyboard controls or uses a cursor. |
Unlike buttons, links do not trigger actions themselves, links are navigation. Call to action links are navigation to take you to complete an action on a new page or location on the page.
Navigation should only be provided if it’s available. HTML doesn’t have a disabled attribute for links and aria disabled will not disable the functionality of a link. It is strongly recommended not to “fake” a disabled link, as it will cause accessibility info and relationships issues.
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.