Skip to main content

​
Call to Action (CTA)

Call to Action (CTA) elements guide users toward specific actions within your application. Effective CTAs use clear, concise language that motivates users to take the desired action.
CTAs are most commonly implemented using the Button component. Review the Button documentation for implementation details.

​
CTA Content Writing Guidelines

The following guidelines will help you create effective, consistent CTAs throughout your application.

​
Verb-First Phrasing

Start with action verbs that clearly communicate what will happen when users engage with the CTA.

Do

Submit Request

Don't

Request Submission
Connect your CTA phrasing to the page context. For example, use “Submit Request” after a heading like “Request Access” to reinforce the user’s goal.

​
Concise Text

Keep CTAs brief - limit to 3 words or fewer to ensure scannability.

Do

Create Account

Don't

Click Here to Create Your New Account
Brief CTAs encourage providing context in surrounding page elements rather than overloading the button itself with explanatory text.

​
Consistent Capitalization

Use title case for all CTAs to help them stand out and maintain consistency across your interface.

Do

Download Report

Don't

download report
Title case styling helps users quickly identify and understand actions.

​
Specific and Actionable Language

Use descriptive language that clearly indicates what will happen when the user interacts with the CTA.

Do

Delete User Group

Don't

Delete
Specificity helps users make informed decisions and reduces uncertainty.

​
Button Type-Specific Guidelines

Different button types serve different purposes and should use appropriate language patterns:

​
Primary Buttons

Use verb-first phrases that drive the main task.

Examples

  • Save
  • Submit
  • Create Project
Primary buttons represent the most important action on a page. Use exactly one per view.

​
Secondary Buttons

Use dismissive or completion verbs.

Examples

  • Apply
  • Done
  • Update
Secondary buttons are used when there isn’t a single, flow-advancing primary action or for small grouped actions.

​
Outline Buttons

Use neutral verbs that don’t move the flow forward.

Examples

  • Cancel
  • Back
  • Preview
Outline buttons typically handle alternate or cancel actions.

​
Destructive Buttons

Lead with danger verbs and be descriptive.

Examples

Delete User Group Remove Account Discard Changes
Always follow destructive actions with confirmation to prevent unintended consequences.

​
Writing Formula

Follow the simple formula: “To do X, do Y” This helps users understand both the action and outcome. The CTA text (Y) should clearly relate to the user’s goal (X).

Example

  • Page heading: “Team Workspace”
  • User goal (X): Create a new team
  • CTA text (Y): “Add Team”

​
Placement and Hierarchy

The positioning of CTAs affects how users perceive their importance:
  1. Primary actions should be positioned at the bottom right or in a prominent location
  2. Secondary actions should be positioned to the left of the primary action
  3. Destructive actions should be positioned away from affirmative actions to prevent accidental clicks
When using multiple CTAs in close proximity, ensure their visual hierarchy matches their importance and consider using different button styles to differentiate them.

​
Accessibility Considerations

Effective CTAs contribute to a more accessible user experience:
  • Avoid relying solely on color to distinguish between different types of CTAs
  • Ensure sufficient contrast between button text and background
  • Use descriptive text that makes sense when read by screen readers without visual context
  • Avoid vague phrases like “Click Here” or “Learn More” without additional context

​
Testing Your CTAs

Consider testing your CTA text with these questions:
  1. Does the CTA clearly communicate what will happen when clicked?
  2. Is the CTA brief and scannable?
  3. Does the CTA match the user’s goal on this page?
  4. Is the CTA specific and actionable?
  5. Does the CTA use consistent capitalization and formatting?
By following these guidelines, you’ll create CTAs that effectively guide users through your application while maintaining a consistent, accessible, and user-friendly experience.
  • Button - The primary component used to implement CTAs
  • Link - For text-based CTAs that navigate to other pages
⌘I