Promo CTA

When to use

• Use a promo CTA when you want to draw attention to one key action on a page, such as registering interest, signing up, or starting a featured journey
• Use one promo CTA per page. Its impact relies on being the single most prominent action

When not to use

• If the action is part of a serious or functional task, such as submitting a form or completing a payment, use a button instead. A promo CTA has a promotional feel that can undermine tasks the user needs to trust

Content guidance

• Write the label as a clear action. Start with a verb so the user knows what happens when they click

Accessibility

This component is designed with accessibility built in:

• The entire bar is a single clickable target, giving a large, easy to hit action area
• The arrow gives a visual cue of interactivity that does not rely on colour alone
• Focus state is designed and visible
• Colour contrast between the label and both the default and hover surfaces meets 4.5:1

When implementing, verify:

• The label alone describes where the link leads. If it does not, provide an aria-label that gives full context
• The component is announced as a link to assistive technology

Resources

• Figma
• Storybook