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 link Navigation (primary) Navigation (secondary) Pagination PopoverPlanned Progress stepper Scheme toggle Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed
Theming OverviewColor PalettesCustomizingDevelopers
Patterns All PatternsCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile
Personalization All Personalization PatternsAnnouncement
Accessibility FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers
Design/code status Release notes Get support

Call to action

OverviewStyleGuidelinesCodeAccessibilityDemos
StyleColor schemeVariantsSpaceInteraction statesStyleColor schemeVariantsSpaceInteraction states

Style

A call to action is text in a container or paired with an icon that directs users to new pages. Depending on the link, content, and hierarchy, a call to action can be used on its own or grouped with other calls to action.

Anatomy

Anatomy image showing calls to action with three annotation numbers denoting the parts below
  1. Text label
  2. Container
  3. Icon

Color scheme

Calls to action are available in both light and dark color schemes.

Light scheme

Light scheme Primary, Secondary, and Tertiary CTA's.

Dark scheme

Dark scheme Primary, Secondary, and Tertiary CTA's.

Variants

Brick

The Brick variant may display an icon positioned to the left or on top of text.

Three bricks. Blue text with a gray border surrounding the text. The right two bricks show where an icon would go—on top or to the left.

Video

Calls to action may include a video icon.

Primary, Secondary, and Default variants with video icons to the right of text

Desaturated

Desaturated calls to action are white and should only be used on dark or very saturated surfaces where color contrast might be an issue. The desaturated variant is a pattern and can be implemented through theming.

Four desaturated CTAs on a dark background: primary, secondary, default and brick. Four desaturated white CTAs on a purple background: primary, secondary, default, and brick.

Space

Space values in calls to action do not change even if viewport sizes change. To see space values when calls to action are grouped, go to the Guidelines page.

Primary, Secondary, and a Default CTA. Each has 32px inline padding and 16px block padding. There's 8px gap between the text and optional arrow.

Interaction states

To see live interaction states, go to the Demos page.

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