---
title: Call to Action (Button)
date: 2023-12-17T12:13:00-08:00
author: Josh Magness
canonical_url: "https://designsystem.umd.edu/components/call-to-action-2"
section: Components
---
# Call to Action (Button)

Calls to Action are stylized links that attract visual attention and direct users to take a specific action, such as visiting another page or website. 
A stylized link directing users to take a specific action
## Dos
- Use specific language that tells users what will happen when they click on the link
## Don'ts
- Don’t use long labels - limit to 3 words or fewer 
- Don’t wrap labels onto 2 lines
- Don’t repeat generic labels such as “Learn more” in multiple calls to action on the same page if alternative text can’t be provided for assistive devices
## Variations

[View component playground: Call to Action (Button)](https://playground.designsystem.umd.edu/?path=/story/components-call-to-action-button--primary)

## Accessibility

### Built in accessibility

**Keyboard Accessible**
Users are able to use the keyboard to navigate through the call to action (button) using the ‘Tab’ key to navigate/focus and ‘Enter’ or ‘Spacebar’ to activate and focus can be moved away from the component. WCAG 2.1.1: Keyboard; WCAG 2.1.2: No Keyboard Trap This navigation is done in sequential and logical order when there are multiple call to actions grouped together or when there is a call to action and a plain text file link. WCAG 2.4.3: Focus Order

**Color Contrast**
A contrast ratio of at least 4:5:1 between text and background color is ensured to enhance readability WCAG 1.4.3: Contrast (minimum)

**Responsive**
 The component scales in relation to the to the screen size to prevent truncating content and reflows properly when zoomed up to 200% without horizontal scrolling WCAG 1.4.10: Reflow

**Plain text**
The plain text slot in a download call to action specifically allows users to access a plain text file directly from the call to action element. It is represented as an anchor link within the button, styled distinctly but integrated within the overall call to action design, providing an alternative download option as a plain text file which offers a streamlined way to provide users with essential text files directly through the interface. Appropriate HTML elements and attributes (like aria-label or aria-labelledby) are used to communicate the relationship between the button and the text slot link. WCAG 1.3.1: Info and RelationshipsStyle, color, and different text styles are used to differentiate the download button from the plain text slot link to ensure that there are multiple visual means of conveying information and indicating an action. WCAG 1.4.1: Use of Color

### Requirements for use

**Plain text**
The link text for the plain text slot should clearly indicate that it leads to a plain text file download. By clearly labeling the slot with the action it performs (e.g., “Download Text File” or “View Source Code”), you ensure transparency and communicate the function directly to the user.  WCAG 2.4.4: Link Purpose (In Context)

**Link**
Use effective text to describe what the link is and where it is taking the user. This should be clear, descriptive text that conveys the link content succinctly and the purpose and destination of the link. WCAG 2.4.9: Link Purpose (Link Only)Example of effective text (preferred): Learn more about Innovate MarylandExample of generic text (avoid): Learn moreDisclaimer: If the visible link text is not sufficiently descriptive, you can use an aria-label attribute to provide additional context for screen reader users. The aria-label should clearly describe the link's purpose and destination.If the visible text is not necessary for screen readers (e.g., it's redundant or less descriptive), consider using aria-hidden="true" on the visible text element. This ensures that screen readers will prioritize the aria-label.Example with aria-label and aria-hidden:<a href="https://example.com/innovate-maryland" aria-label="Learn more about Innovate Maryland"> 
  <span aria-hidden="true">Learn more</span> 
</a> This ensures that the link is accessible while maintaining concise visible text.

## Content

Recommended character limits
| Call to Action text (primary) | 12 characters (25 max) | 
| Call to Action text (secondary) | 12 characters (50 max) | 
## Layout

Calls to Action contain icon indicator options for links that go off-site, to documents, or to text content for accessibility.

[View Figma design: Call to Action (all) - anatomy](https://www.figma.com/file/YqgNlOMETaJbcI67sv8HUp/Downloadable-Components-File?type=design&node-id=158%3A34318&mode=design&t=UlXOtPPmqV2hHwTW-1)