CTA (Call to Action) links help users navigate or complete tasks with a single click.
CTA links make it easy for users to take action on a page, increasing the prominence of the link that needs to be followed. You can also add optional labels or icons to clearly communicate each link's purpose.
When to use this component
Use CTA links when you want users to take action or navigate between pages. They are great for guiding users to the next step without cluttering the page with too many options at once.
It's a good idea to use separate CTA links for each key action to keep things clear, avoiding multiple links for the same task to prevent confusion. For minor actions, consider using a smaller link style to keep it subtle.
If users need to select or toggle options rather than perform an action, it's better to use checkboxes, radio buttons, or toggle switches.
CTA links can also be a great alternative to buttons when you want to emphasise actions and maintain a clean, structured design.
Examples in GOSS products
- Default template for emphasising article links
- Panel template for showing the link on each panel
- Self Service template to link to a different task
Accessibility considerations
CTA links are excellent for accessibility because they provide clear visual cues, are easily navigable via keyboard, and are compatible with screen readers, making them accessible to users with different abilities.
The text on CTA links should be descriptive, helping users understand the action they'll trigger.
To enhance accessibility, ensure sufficient contrast between the link and the background and provide clear focus indicators when navigating with a keyboard.
Additionally, avoid using links for non-link actions, like submitting forms, and test with assistive technologies to ensure compatibility.
Basic CTA link
A CTA Link component with no additional configuration options, encourages users to take action, like visiting a new page or completing a task, to help guide them along the way.
<a class="cta-link" href="#">
CTA link
</a>Contrast CTA link
A CTA link with a contrast style applied.
cta-link cta-link--contrast
By setting the cta-link--contrast class on the link, you can apply a contrast style to a CTA link to make it stand out, ensuring users easily identify it for key actions. This styling approach mirrors the design used for alert components, as the same class is also applied to alert fields in forms and highlight boxes in content areas. By using this consistent styling, you create a visually cohesive and accessible interface across different components.
<a class="cta-link cta-link--contrast" href="#">
CTA link
</a>Disabled CTA link
A CTA Link with a disabled class applied.
cta-link cta-link--disabled
By setting the disabled attribute on the link, you can apply this to a link to indicate that it's not currently interactive, preventing users from clicking it while still keeping it visible in the interface. This helps maintain clarity and prevents confusion when certain actions aren't available.
<a class="cta-link cta-link--disabled" href="#">
Disabled CTA link
</a>Additional CTA link styles
Links with additional modifiers to style it for specific purposes.
Full width link.
cta-link cta-link--fullwidth
Positive link.
cta-link cta-link--postive
Negative link.
cta-link cta-link--negative
Progress link.
cta-link cta-link--progress
Primary link.
cta-link cta-link--primary
Secondary link.
cta-link cta-link--secondary
<a href="#" class="cta-link cta-link--fullwidth">Full width CTA link</a></br>
<a href="#" class="cta-link cta-link--positive">Positive CTA link</a></br>
<a href="#" class="cta-link cta-link--negative">Negative CTA link</a></br>
<a href="#" class="cta-link cta-link--progress">Progress CTA link</a></br>
<a href="#" class="cta-link cta-link--primary">Primary CTA link</a></br>
<a href="#" class="cta-link cta-link--secondary">Secondary CTA link</a>
Icon CTA link
A link with a icon style applied.
cta-link cta-link--forward
By setting the cta-link--forward class on the link, you can apply this to a link to to make them more visually intuitive, helping users quickly identify the action they're meant to perform. This can enhance clarity and improve the user experience, especially when paired with text labels. Icons also align with the overall design system, maintaining a consistent and accessible interface across components.
<a href="#" class="cta-link cta-link--forward">
Icon CTA link
</a>Icon CTA link styles
Links with additional icon modifiers to style it for specific purposes.
Big icon link.
cta-link cta-link--forward cta-link--big-icon
Icon only link.
cta-link cta-link--forward cta-link--icon-only
Big icon only link.
cta-link cta-link--forward cta-link--big-icon cta-link--icon-only
<a href="#" class="cta-link cta-link--forward cta-link--big-icon">
Big icon link
</a>
<br/>
<a href="#" class="cta-link cta-link--forward cta-link--icon-only">
<span class="accessibility">Icon only link</span>
</a>
<br/>
<a href="#" class="cta-link cta-link--forward cta-link--big-icon cta-link--icon-only">
<span class="accessibility">Big icon only link</span>
</a>
Icon options
Link with additional icon modifiers to style it for specific purposes.
Add link.
cta-link cta-link--add
Alert link.
cta-link cta-link--alert
Back link.
cta-link cta-link--back
Cancel link.
cta-link cta-link--cancel
Complete link.
cta-link cta-link --complete
Delete link.
cta-link cta-link--delete
Hidden link.
cta-link cta-link--displaynone
Edit link.
cta-link cta-link--edit
Filter link.
cta-link cta-link--filter
Forward link.
cta-link cta-link--forward
Home link.
cta-link cta-link--home
Pause link.
cta-link cta-link--pause
Play link.
cta-link cta-link--play
Previous link.
cta-link cta-link--prev
Remove link.
cta-link cta-link--remove
Search link.
cta-link cta-link--search
Selected link.
cta-link cta-link--selected
Stop link.
cta-link cta-link--stop
Time link.
cta-link cta-link--time
Update link.
cta-link cta-link--update
Alert link
Back link
Cancel link
Complete link
Delete link
Edit link
Filter link
Forward link
Home link
Pause link
Play link
Previous link
Remove link
Search link
Selected link
Stop link
Time link
Update link
<a href="#" class="cta-link cta-link--add">
Add link
</a>
<br />
<a href="#" class="cta-link cta-link--alert">
Alert link
</a>
<br />
<a href="#" class="cta-link cta-link--back">
Back link
</a>
<br />
<a href="#" class="cta-link cta-link--cancel">
Cancel link
</a>
<br />
<a href="#" class="cta-link cta-link--complete">
Complete link
</a>
<br />
<a href="#" class="cta-link cta-link--delete">
Delete link
</a>
<br />
<a href="#" class="cta-link cta-link--edit">
Edit link
</a>
<br />
<a href="#" class="cta-link cta-link--filter">
Filter link
</a>
<br />
<a href="#" class="cta-link cta-link--forward">
Forward link
</a>
<br />
<a href="#" class="cta-link cta-link--home">
Home link
</a>
<br />
<a href="#" class="cta-link cta-link--pause">
Pause link
</a>
<br />
<a href="#" class="cta-link cta-link--play">
Play link
</a>
<br />
<a href="#" class="cta-link cta-link--prev">
Previous link
</a>
<br />
<a href="#" class="cta-link cta-link--remove">
Remove link
</a>
<br />
<a href="#" class="cta-link cta-link--search">
Search link
</a>
<br />
<a href="#" class="cta-link cta-link--selected">
Selected link
</a>
<br />
<a href="#" class="cta-link cta-link--stop">
Stop link
</a>
<br />
<a href="#" class="cta-link cta-link--time">
Time link
</a>
<br />
<a href="#" class="cta-link cta-link--update">
Update link
</a>
<br />Share this page
