Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographyInteractionsSpacingTypography
Tokens Overview Global colorbox shadowTypographyborderopacityspacelengthIconBreakpointsMedia Queries
Elements All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepsPlanned Site status Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCardTabsFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Call to action

OverviewStyleGuidelinesCodeAccessibilityDemos
ImportingUsagerh-ctaImportingUsagerh-cta

Importing

Add rh-cta to your page with this import statement:

<script type="module">
  import '@rhds/elements/rh-cta/rh-cta.js';
</script>
Copy to Clipboard Wrap lines

To learn more about installing RHDS elements on your site using an import map read our getting started docs.

Lightdom CSS shim

Warning

Lightdom CSS shims are an optional, temporary solution for reducing CLS. Learn more about lightdom CSS shims .

 
<link rel="stylesheet" href="/path/to/rh-cta/rh-cta-lightdom-shim.css">

Note

Replace /path/to/ with path to the CSS file, whether local or CDN.

Usage 

<rh-cta href="#">Call to Action</rh-cta>

<script type="module">
  import '@rhds/elements/rh-cta/rh-cta.js';
</script>
Copy to Clipboard Wrap lines

rh-cta

A call to action is styled text representing a link.

Slots 1
Slot Name Summary Description
The

The default slot contains the link text when the href attribute is set. In case there is no href attribute, an anchor tag (<a href="...">) should be the first child inside rh-cta element. Less preferred but allowed for specific use-cases include: <button> (note however that the button tag is not supported for the default CTA styles).
Attributes 8
Attribute DOM Property Description Type Default
variant variant

Indicates the importance of this call-to-action in the context of the page. Will also influence how the call-to-action is styled.

  • Primary: Use for the primary or most important link. This variant is the highest in hierarchy and can also be used to play a video in a Modal or large container.
  • Secondary: Use for secondary or general links. This variant is lower in hierarchy than the Primary variant and can be used multiple times in the same container or layout.
  • Brick: Use to group links together. Only the Brick variant can stretch to fit a container or grid, otherwise the text label padding in other variants stays the same.
  • Default (no variant): Use for tertiary or the least important links. This variant is the lowest in hierarchy and can be used multiple times in the same container or layout.
 
'primary' | 'secondary' | 'brick'
 
unknown
href href

When set, overrides the default slot. Use instead of a slotted anchor tag

 
string
 
unknown
download download

when href is set, the link's download attribute

 
string
 
unknown
referrerpolicy referrerpolicy

when href is set, the link's referrerpolicy attribute

 
string
 
unknown
rel rel

when href is set, the link's rel attribute

 
string
 
unknown
target target

when href is set, the link's target attribute

 
string
 
unknown
icon icon

Icon name

 
IconNameFor<IconSetName>
 
unknown
icon-set iconSet

Icon set

 
IconSetName
 
'ui'
Methods 2
Method Name Description
scheduleUpdate()
firstUpdated()
Events 0
None
CSS Shadow Parts 1
Part Name Summary Description
container

container element for slotted CTA
CSS Custom Properties 42
CSS Property Description Default
--rh-cta-color var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-background-color var(--rh-color-brand-red-on-light, #ee0000)
--rh-cta-border-color var(--rh-color-brand-red-on-light, #ee0000)
--rh-cta-hover-color var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-hover-background-color var(--rh-color-brand-red-dark, #be0000)
--rh-cta-hover-border-color var(--rh-color-brand-red-dark, #be0000)
--rh-cta-focus-color var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-focus-background-color var(--rh-color-brand-red-on-light, #ee0000)
--rh-cta-focus-container-background-color transparent
--rh-cta-focus-container-outline-color #0066cc
--rh-cta-focus-border-color transparent
--rh-cta-focus-inner-border-color transparent
--rh-cta-active-color var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-active-background-color var(--rh-color-brand-red-dark, #be0000)
--rh-cta-active-container-background-color #0066cc1a
--rh-cta-active-inner-border-color var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-text-decoration none
--rh-cta-focus-text-decoration none
--rh-cta-hover-text-decoration none
--rh-cta-active-text-decoration none
--rh-icon-size —
--rh-cta-focus-container-outline-color var(--rh-cta-focus-outline-color)
--rh-cta-focus-outline-color —
--rh-cta-font-size-priority var(--rh-font-size-body-text-md, 1rem)
--rh-cta-focus-container-background-color #73bcf740
--rh-cta-active-container-background-color #73bcf740
--rh-cta-focus-background-color var(--rh-color-surface-dark, #383838)
--rh-cta-active-color var(--rh-color-text-primary)
--rh-cta-background-color transparent
--rh-cta-border-color var(--rh-color-border-subtle)
--rh-cta-color var(--rh-color-interactive-primary-default)
--rh-cta-hover-background-color var(--rh-color-surface-darker, #1f1f1f)
--rh-cta-hover-border-color var(--rh-color-border-subtle)
--rh-cta-hover-color var(--rh-color-interactive-primary-hover)
--rh-cta-hover-text-decoration underline
--rh-cta-focus-color var(--rh-color-interactive-primary-default)
--rh-cta-focus-border-color var(--rh-color-border-subtle)
--rh-cta-focus-inner-border-color var(--rh-color-border-subtle)
--rh-cta-focus-text-decoration none
--rh-cta-active-background-color var(--rh-color-surface-darker, #1f1f1f)
--rh-cta-active-inner-border-color var(--rh-color-border-subtle)
--rh-cta-active-text-decoration underline
Design Tokens 31
Token Copy
--rh-font-family-heading
--rh-line-height-body-text
--rh-font-size-body-text-lg
--rh-animation-speed
--rh-animation-timing
--rh-border-width-md
--rh-border-radius-default
--rh-border-width-sm
--rh-space-2xl
--rh-space-lg
--rh-space-xl
--rh-font-size-body-text-md
--rh-color-brand-red
--rh-color-brand-red-dark
--rh-color-surface-darkest
--rh-color-text-primary-on-dark
--rh-color-text-primary-on-light
--rh-color-surface-dark
--rh-color-text-primary
--rh-color-border-strong
--rh-color-surface-lightest
--rh-color-surface-light
--rh-color-border-strong-on-light
--rh-font-family-body-text
--rh-font-weight-body-text-regular
--rh-space-md
--rh-color-interactive-primary-hover
--rh-color-interactive-primary-default
--rh-color-surface-lighter
--rh-color-surface-darker
--rh-color-border-subtle
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify