Components/

Call to Action

CTA, CTA Button, CdrCta

Stylized link used in campaigns and promotions to encourage users to further explore featured products, services or offers

CdrCTA has been deprecated and it's functionality has been merged into the CdrButton component. See the summer 2020 release notes for details on migrating.

# Overview

# Dark

Use dark Call to Action over a light background image or color to provide proper contrast. This is the default Call to Action style.

Primary Secondary

View on GitHub

View on CodeSandbox

# Light

Use light Call to Action over a dark background image or color to provide proper contrast.

Primary Secondary

View on GitHub

View on CodeSandbox

# Sale

Use sale Call to Action for off-price placements.

Primary Secondary

View on GitHub

View on CodeSandbox

# Brand

Use brand Call to Action as an alternative.

Primary Secondary

View on GitHub

View on CodeSandbox

# Elevated

Use elevated Call to Action to add drop shadow to increase contrast and visibility when placed over an image.

Primary Secondary

View on GitHub

View on CodeSandbox

# Full Width

Displays at full width of its container.

Primary Secondary

View on GitHub

View on CodeSandbox

# Accessibility

To ensure that usage of this component complies with accessibility guidelines:

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) (opens new window), 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