Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Call to action

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

Provides a styled link or button for prominent user actions when you need to draw attention to a key interaction. Must contain an href attribute or a slotted <a> / <button>. Screen readers announce the slotted text. Used primarily for linking to other pages. Users should prefer to use the href attribute or slotted links with this component. Avoid <button> with the default (no variant) style.

import '@rhds/elements/rh-cta/rh-cta.js';
 
<rh-cta href="#">Call to Action</rh-cta>
 
import { Cta } from "@rhds/elements/react/rh-cta/rh-cta.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Cta href="#">Call to Action</Cta>
);

Visual importance: primary (red fill), secondary (bordered), brick (full-width grid), or undefined (default inline link with arrow).

URL for the CTA link. Renders an internal <a> instead of using a slotted element.

Triggers a file download when href is set. Passes through to the link.

Referrer policy when href is set. Passes through to the link.

Link relationship when href is set. Passes through to the link.

Browsing context when href is set (e.g. _blank). Passes through to the link.

Icon name. Overrides the default trailing arrow, or displays before text in brick variant.

Icon set to load from. Defaults to ui.

 View source on GitHub

Status

When to use

  • Apply specific styling to interactive text
  • Entice users to select a link
  • Allow users to navigate to a different page or domain

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify