Call to Action Component

What is it?

A Call to Action (CTA) is a prompt that guides users toward a desired next step. It’s presented as a button or link and uses concise, action-oriented language. CTAs are essential for directing user behavior, supporting conversion goals and creating a clear path through a website.

Elements 

  • Link text: Describes the link destination.
  • URL destination: The URL that the CTA will lead to. 

How do you use it? 

  • Signpost user journeys. Start with strong, clear action verbs.
  • Start links with a prompt to take action.
  • Limit choices. One CTA per user journey.
  • Make them standalone. CTAs should make sense out of context.
  • Be concise. Use short, clear, descriptive text.
  • The best CTAs are self-explanatory.
  • CTAs text should be sentence case. 

Why are they important? 

  • Creates a clear content hierarchy that aligns with user intent and search engine logic.
  • Improves accessibility, a key ranking and usability factor.
  • Boosts engagement metrics that indirectly influence SEO performance.
  • Enhances overall site experience, which Google’s algorithms increasingly prioritize.

Primary buttons

Primary buttons represent the most important action for a user to take on the page. They should make it quick and easy for the user to find what they need to do because primary buttons jump out on the page.

Characteristics of primary buttons

  • Short CTA (Call to action) that tells the user what to do. For example: Apply today, Visit campus, Schedule a call, Explore undergraduate programs. 
Schedule a visit today
Side-by-side comparison of "primary button" and "primary button small":
Apply today Request information

Secondary buttons

Secondary buttons are used for the second most important action/s on the page.

Characteristics of secondary buttons

  • Same color as the primary button but with an outline instead of a solid color.
  • Short CTA similar to the examples given for primary buttons. Unlike primary buttons, though, there can be more than one secondary button on a page.

Example

This is a good example of how secondary buttons and primary buttons work together. Notice that the preferred action here is still "Apply today," but now there is a "Request more information" secondary button. 

Apply today Request more information
Side-by-side comparison of "secondary button" and "secondary button small":
Secondary button Secondary button small

Tertiary buttons

Tertiary buttons are third on the list of priorities determined for the page. They are used less often than primary and secondary buttons and often not at all. But they are still an important tool to help users navigate a page.

Characteristics of tertiary buttons

  • The CTA text uses the same color as the primary button; however, the tertiary button does not include a color fill or outline. It appears as clickable text but is still coded as a button to ensure it is recognizable and accessible to screen readers.

Example

The primary CTA, “Apply today,” and the secondary CTA, “Request more information,” address the action and interest stages of the enrollment funnel, respectively. A tertiary CTA should engage prospective students who are still in the exploration phase or not yet ready to take immediate action. “Explore programs” effectively supports the discovery stage by encouraging users to learn more before deciding to apply or request additional information.

Apply today Request more information Explore programs