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 PatternsCardTabsFilterFormLinkLink with iconLogo wallSearch barSkip navigationSticky bannerSticky cardTileVideo thumbnail
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 a styled link that entices users to make a selection.

Slots 1
Slot Name Description
undefined

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' | undefined
unknown
href href

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

string | undefined
unknown
download download

when href is set, the link's download attribute

string | undefined
unknown
referrerpolicy referrerpolicy

when href is set, the link's referrerpolicy attribute

string | undefined
unknown
rel rel

when href is set, the link's rel attribute

string | undefined
unknown
target target

when href is set, the link's target attribute

string | undefined
unknown
icon icon

Icon name

IconNameFor<IconSetName> | undefined
unknown
icon-set iconSet

Icon set

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

container element for slotted CTA

CSS Custom Properties 20
CSS Property Description Default
--rh-cta-color

Sets the cta color

var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-background-color

Sets the cta background color

var(--rh-color-brand-red-on-light, #ee0000)
--rh-cta-border-color

Sets the cta border color

var(--rh-color-brand-red-on-light, #ee0000)
--rh-cta-hover-color

Sets the cta color on hover

var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-hover-background-color

Sets the cta background color on hover

var(--rh-color-brand-red-dark, #be0000)
--rh-cta-hover-border-color

Sets the cta boder color on hover

var(--rh-color-brand-red-dark, #be0000)
--rh-cta-focus-color

Sets the cta color on focus

var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-focus-background-color

Sets the cta background color on focus

var(--rh-color-brand-red-on-light, #ee0000)
--rh-cta-focus-container-background-color

Sets the cta container background color on focus

transparent
--rh-cta-focus-container-outline-color

Sets the cta container outline color on focus

#0066cc
--rh-cta-focus-border-color

Sets the cta border color on focus

transparent
--rh-cta-focus-inner-border-color

Sets the cta inner border color on focus

transparent
--rh-cta-active-color

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

var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-active-background-color

Sets the cta background color on active

var(--rh-color-brand-red-dark, #be0000)
--rh-cta-active-container-background-color

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

#0066cc1a
--rh-cta-active-inner-border-color

Sets the cta inner border color on active

var(--rh-color-text-primary-on-dark, #ffffff)
--rh-cta-text-decoration

Sets the cta text decoration

none
--rh-cta-focus-text-decoration

Sets the cta text decoration on focus

none
--rh-cta-hover-text-decoration

Sets the cta text decoration on hover

none
--rh-cta-active-text-decoration

Sets the cta text decoration on active

none
Design Tokens 32
Token Copy
--rh-animation-speed
Full CSS Variable Permalink to this token
--rh-animation-timing
Full CSS Variable Permalink to this token
--rh-border-radius-default
Full CSS Variable Permalink to this token
--rh-border-width-md
Full CSS Variable Permalink to this token
--rh-border-width-sm
Full CSS Variable Permalink to this token
--rh-color-border-strong
Full CSS Variable Permalink to this token
--rh-color-border-strong-on-light
Full CSS Variable Permalink to this token
--rh-color-border-subtle
Full CSS Variable Permalink to this token
--rh-color-brand-red
Full CSS Variable Permalink to this token
--rh-color-brand-red-dark
Full CSS Variable Permalink to this token
--rh-color-interactive-primary-default
Full CSS Variable Permalink to this token
--rh-color-interactive-primary-hover
Full CSS Variable Permalink to this token
--rh-color-surface
Full CSS Variable Permalink to this token
--rh-color-surface-dark
Full CSS Variable Permalink to this token
--rh-color-surface-darker
Full CSS Variable Permalink to this token
--rh-color-surface-darkest
Full CSS Variable Permalink to this token
--rh-color-surface-light
Full CSS Variable Permalink to this token
--rh-color-surface-lighter
Full CSS Variable Permalink to this token
--rh-color-surface-lightest
Full CSS Variable Permalink to this token
--rh-color-text-primary
Full CSS Variable Permalink to this token
--rh-color-text-primary-on-dark
Full CSS Variable Permalink to this token
--rh-color-text-primary-on-light
Full CSS Variable Permalink to this token
--rh-font-family-body-text
Full CSS Variable Permalink to this token
--rh-font-family-heading
Full CSS Variable Permalink to this token
--rh-font-size-body-text-lg
Full CSS Variable Permalink to this token
--rh-font-size-body-text-md
Full CSS Variable Permalink to this token
--rh-font-weight-body-text-regular
Full CSS Variable Permalink to this token
--rh-line-height-body-text
Full CSS Variable Permalink to this token
--rh-space-2xl
Full CSS Variable Permalink to this token
--rh-space-lg
Full CSS Variable Permalink to this token
--rh-space-md
Full CSS Variable Permalink to this token
--rh-space-xl
Full CSS Variable Permalink to this token
© 2021-2025 Red Hat, Inc. Deploys by Netlify