Clearly and concisely describe the link’s destination when the button is clicked or tapped:
- For example, if the button text is "Shop now", the aria-label might read: "Shop our <specific advertising category> now"
Avoid using "click here" or "start here". If screen space for text is minimal:
- Provide text that can be read by screen readers
- Use an inline element for hidden text with the cdr-sr-only class
```
<cdr-cta>
  Start here <span class="cdr-sr-only">for help finding the proper sleeping bag</span>
</cdr-cta>
```
1
2
3
Ensure screen readers can find all Call to Action buttons on a page by:
- Always providing an href attribute. Empty href attributes are not considered true links
- Ensuring that it can be accessed using the keyboard. Avoid manipulating the default tab index

This component has compliance with WCAG SC 1.4.3: Contrast (Minimum), however, do the following:

Choose the light button theme for a dark background or the dark button theme for a light background
Test color contrast for button themes against all backgrounds

# Guidelines

# Use When

Encouraging a user to navigate to a new location
Promoting a campaign, promotional advertisements, or email offers

# Don't Use When

Triggering interface interactions. Instead, use Buttons

# Content

Call to Action exists as a means to navigate users to a new location or additional information:

Use clear and concise text
Make it clear what happens when this link is clicked or tapped. For example, “Shop backpacking” Call to Action on a homepage would navigate the user to an assortment of backpacking-related products available for purchase
Use sentence case. Do not use all caps, title caps, or all lowercase

To construct consistent and universal Call to Actions across the site:

If leading to a Brand, Category, or Activity Landing page, UI text for Call to Action should be Explore Brand/Category/Activity Name
If leading to a Product Detail page, UI text for Call to Action should be Shop product name
If leading to a Collection or search result, UI text for Call to Action should be Shop all Brand/Category/Activity Name

# Behavior

Avoid combining a Call to Action with a basic button. Disabling Call to Actions is not semantically supported
Maintain button styling including typographic and sizing for Call to Action. Do not style as a link

# Do / Don't

Image showing proper Call to Action usage — Do use Call to Action to lead users to explore more.

Image showing proper Call to Action paired with basic button — Don't mix Call to Action and basic buttons.

Image showing Call to Action with a brief label — Do write brief and concise labels.

Image showing a Call to Action with a long label — Don't write long labels.

Image showing standard size Call to Action — Do maintain standard size.

Image showing a different sized Call to Action — Don't alter the button size.

Image showing standard Call to Action typography — Do maintain standard typography.

Image showing a Call to Action with different typography — Don't alter standard typography.

Image showing standard Call to Action link style — Do maintain standard button-like styles.

Image showing a Call to Action as a link — Don't style as a link.

# API

# Props

ctaStyle

name

string

type

"brand"

default

Sets Call to Action color by changing ctaStyle to match different themes. Possible values: { 'brand' | 'dark' | 'light' | 'sale' }

fullWidth

name

boolean

type

false

default

Sets Call to Action width to 100%. Setting this value to true will set the width to 100% of the parent container.

href

name

string

type

"#"

default

Sets the link using the page url.

modifier

name

string

type

N/A

default

Modifies the style variant for this component. Possible values: { 'elevated' }

# Slots

Find more information about using Slots in the article Getting Started as a Developer.

default

name

Sets the innerHTML for CdrCta. This is the readable text of the button.

# Usage

This example code renders a full width cdr-cta, with the elevated modifier and the sale theme.

<template>
  <cdr-cta
    href="https://rei.com"
    :full-width="true"
    cta-style="sale"
    modifier="elevated"
  >
    See our new gear!
  </cdr-cta>
</template>

1
2
3
4
5
6
7
8
9
10

The CdrCta component looks like a button, however it's actually an anchor:

Do not use when a button is preferable such as triggering an action
Do not assign the role of button
For basic links, use the CdrLink component

# Modifiers

The following variants are available to the cdr-cta modifier attribute:

Value	Description
'elevated'	Adds drop shadow to button