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
GuidelinesUsing styles or variantsWriting contentBehaviorResponsive designBest practicesGuidelinesUsing styles or variantsWriting contentBehaviorResponsive designBest practices

Guidelines

Use a call to action to entice users to make a selection.

When to use a call to action

Use a call to action to highlight a link on its own so it stands out to users. Most of the time, calls to action are arranged last in a group of elements so users can read about something first and then proceed further if they are interested.

Call to action vs. button

Here is guidance on when to use a call to action vs. button.

Element Intended action Frequency
Call to action Direct users to another page when selected Always
Button Perform an action when selected Depending on the action, users may or may not be directed to another page as the result of the action

Using styles or variants

Some calls to action can be used more than once per page depending on their messaging and placement.

Style or variant How to use
Primary Try to use only once per page for the most important link
Secondary Use several times on the same page for important links
Tertiary Use several times on the same page for less important links
Brick Use to group several links together in a grid
Video Use to trigger a video within a dialog
Desaturated Use only in the dark scheme if other styles are duplicative or violate accessibility guidelines

Bricks

UI icons can be used in the Brick variant to add visual interest to various topics.

Four brick CTAs with various accompanying UI icons

Writing content

General text

When writing text, be specific and communicate the action you want users to take by doing the following:

  • Make sure text is unique and easily understood especially when screen readers announce text to users
  • Always start with a verb, do not use more than 1 verb
  • Use simple words and phrases
  • Keep word counts as short as possible, delete words if needed
  • Do not use any punctuation
  • Do not add extra icons
  • Be aware that text might get longer when translated to certain languages
Incorrect vs correct usage. Incorrect: Press release: Red Hat optimizes Red Hat AI. Correct: Read the latest Red Hat AI press release

Clarity of language

Generic or vague text does not help users make informed decisions.

Incorrect vs correct usage. Incorrect: Learn more. Correct: Learn about Red Hat AI Enhancements

Long text

Most users do not want to spend more time reading than necessary, so keep text as short as possible.

Four CTA examples. Two with long text (up to 82 characters) and two with correct text (30-55 characters)

Behavior

Placement

Calls to action can be placed in just about any layout or interface. For normal environments, using any style is acceptable. For small environments, use the Tertiary style.

Hierarchy

Calls to action follow a hierarchy with the Primary style being the most important.

Use Primary CTA's once or twice per page. Secondary CTA's can be used several times. Tertiary and Brick can be used many times.

Bricks

Brick variants are the only calls to action that can resize to fit various column arrangements. However, the width of other styles and variants is determined by what content is inside.

Various bricks with different character counts and widths in different columns

Grouping

Calls to action are grouped by hierarchy with the Primary style always being first.

Four sets of CTAs. In each, the hierarchy cascades from most important to least important, left to right.

Space when grouped

If calls to action need to be grouped, spacing between them should use the --rh-space-2xl token.

Spacing between Brick variants is flexible and should be the same as grid gutters.

Three sets of Primary and Secondary CTAs, each with 32px of margin between them on all sides. Four tertiary CTAs with 32px of margin between each one. Many Brick CTAs showing the spacing slash gutter being controlled by the grid that contains the component.

Responsive design

Calls to action are arranged horizontally in 1 row by default. As viewports get smaller, they will stack.

Three sets of CTAs showing desktop, tablet, and mobile viewports and how they stack as the viewport gets smaller.

Best practices

Using the primary style

A Primary then Secondary CTA

Use the Primary style to indicate the most important action.

 Two Primary CTAs next to each other

Do not use the Primary style more than once in the same area.

Grouping

A Primary then Secondary CTA

Use a combination of Primary and Secondary styles.

 Two Primary CTAs next to each other

Do not mix more than 2 styles together.

Number of actions

One primary and two Secondary CTAs

Use 3 calls to action max, this helps avoid choice paralysis.

 One primary and four Secondary CTAs

Do not use more than 3 calls to action in the same area.
Edit this page on GitHub
© 2025 Red Hat Deploys by Netlify