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
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 are only available in the dark scheme. Secondary is not included because it looks exactly the same.

A primary and tertiary CTA. The primary has black text and a white background. The tertiary is reversed.

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 Tertiary 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.

Hover

Call to action styles change slightly on hover.

  • Primary - only the background color changes
  • Secondary - the border disappears and the text and background colors invert
  • Tertiary - both the text and icon color change

Focus and active

Focus and Active state styles are the same.

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