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 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 Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionCall 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
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
[default]

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).
Note: [default] unnamed slots do not have a slot="name" attribute.

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

 
'ui' | 'standard' | 'social' | 'microns'
 
'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 23

CSS Property Description Default
--rh-icon-size —
--rh-cta-focus-container-outline-color var(--rh-cta-focus-outline-color)
--rh-cta-focus-outline-color —
--rh-cta-hover-text-underline-offset —
--rh-cta-font-size-priority var(--rh-font-size-body-text-md, 1rem)
--rh-cta-focus-container-background-color

Sets the cta container background color on focus

 #73bcf740
--rh-cta-active-container-background-color

Sets the cta container background color on active. Applicable only for default variant

 #73bcf740
--rh-cta-focus-background-color

Sets the cta background color on focus

 var(--rh-color-surface-dark, #383838)
--rh-cta-active-color

Sets the cta color on active. Applicable only for secondary variant

 var(--rh-color-text-primary)
--rh-cta-background-color

Sets the cta background color

 transparent
--rh-cta-border-color

Sets the cta border color

 var(--rh-color-border-subtle)
--rh-cta-color

Sets the cta color

 var(--rh-color-interactive-primary-default)
--rh-cta-hover-background-color

Sets the cta background color on hover

 var(--rh-color-surface-darker, #1f1f1f)
--rh-cta-hover-border-color

Sets the cta boder color on hover

 var(--rh-color-border-subtle)
--rh-cta-hover-color

Sets the cta color on hover

 var(--rh-color-interactive-primary-hover)
--rh-cta-hover-text-decoration

Sets the cta text decoration on hover

 underline
--rh-cta-focus-color

Sets the cta color on focus

 var(--rh-color-interactive-primary-default)
--rh-cta-focus-border-color

Sets the cta border color on focus

 var(--rh-color-border-subtle)
--rh-cta-focus-inner-border-color

Sets the cta inner border color on focus

 var(--rh-color-border-subtle)
--rh-cta-focus-text-decoration

Sets the cta text decoration on focus

 none
--rh-cta-active-background-color var(--rh-color-surface-darker, #1f1f1f)
--rh-cta-active-inner-border-color

Sets the cta inner border color on active

 var(--rh-color-border-subtle)
--rh-cta-active-text-decoration

Sets the cta text decoration on active

 underline

Design Tokens 31

Token Description Copy
--rh-font-family-heading

Heading font family
--rh-line-height-body-text

Line height for body text
--rh-font-size-body-text-lg

18px font size
--rh-animation-speed
--rh-animation-timing
--rh-border-width-md

2px border width: Example: Alert
--rh-border-radius-default

3px border radius; Example: Card
--rh-border-width-sm

1px border width; Example: Secondary CTA or Button
--rh-space-2xl

32px spacer
--rh-space-lg

16px spacer
--rh-space-xl

24px spacer
--rh-font-size-body-text-md

16px font size
--rh-color-brand-red
--rh-color-brand-red-dark

Dark brand red/Brand red hover
--rh-color-surface-darkest

Primary surface (dark theme)
--rh-color-text-primary-on-dark

Primary text color for dark theme
--rh-color-text-primary-on-light

Primary text color for light theme
--rh-color-surface-dark

Tertiary surface (dark theme)
--rh-color-text-primary
--rh-color-border-strong
--rh-color-surface-lightest

Primary surface (light theme)
--rh-color-surface-light

Secondary surface (light theme)
--rh-color-border-strong-on-light

Strong border color (light theme)
--rh-font-family-body-text

Body text font family
--rh-font-weight-body-text-regular

Regular font weight
--rh-space-md

8px spacer
--rh-color-interactive-primary-hover
--rh-color-interactive-primary-default
--rh-color-surface-lighter

Tertiary surface (light theme)
--rh-color-surface-darker

Secondary surface (dark theme)
--rh-color-border-subtle
Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify