Skip to main content Home
About About the Design SystemRoadmap
Get started OverviewDesignersDevelopers
Foundations OverviewColorGridIconographySpacingTypography
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
StyleColor schemeConfigurationSpaceInteraction statesStyleColor schemeConfigurationSpaceInteraction 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 various annotation numbers
  1. Text label
  2. Container
  3. Border
  4. Icon

Color scheme

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

Light and dark themes

Image of light theme Primary, Secondary, Brick, Default, and Default video variants Image of dark theme Primary, Secondary, Brick, Default, and Default video variants
Property Light theme Dark theme
Color - Primary text #FFFFFF #FFFFFF
Color - Primary surface #EE0000 #EE0000
Border radius - Primary 4px
0.25rem		 4px
0.25rem
Color - Secondary text and border #151515 #FFFFFF
Border radius - Secondary 4px
0.25rem		 4px
0.25rem
Border width - Primary 1px
0.0625rem		 1px
0.0625rem
Color - Brick text #0066CC #73BCF7
Color - Brick border #C7C7C7 #707070
Border radius - Brick 4px
0.25rem		 4px
0.25rem
Border width - Brick 1px
0.0625rem		 1px
0.0625rem
Color - Default text and icon #0066CC #73BCF7

Bricks

The Brick variant includes a slot for an icon as well as an extra orientation.

Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text Image of light theme Brick variants; one with text and no icon, one with an icon on the left of text, and one with an icon on top of text
Property Light theme Dark theme
Color - icon #707070 #A3A3A3

Video variants

Primary, Secondary, and Default variants include a slot for a video icon. The video icon is the same color as the text label.

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

White variants

Dark theme includes white variants if other variants are duplicative or if they violate accessibility guidelines.

Image of Primary and Primary video variants with a white background and black text and Default and Default video variants with white text
Property Current Value
Color - Primary text and icon #151515
Color - Primary surface #FFFFFF
Border width - Primary 4px
0.25rem
Color - Default text and icon #FFFFFF

Configuration

All calls to action with a container have the same border radius, but the height and width vary based on the presence of icons and the amount of content. Calls to action in a row are horizontally centered.

Image of all variants with various specs like border radius, height, width, alignment, and more

Space

Space values are the same on all breakpoints for calls to action. To see space values when calls to action are grouped, go to the Guidelines page.

Image of Primary, Secondary, two Brick variants, and two Default variants with spacing values in between

Interaction states

Interaction states are visual representations used to communicate the status of an element or pattern.

Hover

Image of light theme hover states Image of dark theme hover states Image of dark theme white variant hover states
Property Light theme Dark theme
Color - Primary surface #BE0000 #BE0000
Color - Primary (white) surface N/A #E0E0E0
Color - Secondary text #FFFFFF #151515
Color - Secondary surface #151515 #FFFFFF
Color - Brick text #004080 #73BCF7
Color - Secondary text and border 151515 #FFFFFF
Text decoration - Brick text Underline Underline
Color - Brick surface #F2F2F2 #292929
Color - Default text #004080 #73BCF7
Color - Default (white) text N/A #C7C7C7

Focus

Helpful tip

The Focus state has the same styles as the Hover state.

 Image of light theme focus states Image of dark theme focus states Image of dark theme white variant focus states
Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7

Active

Helpful tip

The Active state has the same styles as the Hover state.

 Image of light theme active states Image of dark theme active states Image of dark theme white variant active states
Property Light theme Dark theme
Color - focus ring #0066CC #73BCF7
Edit this page on GitHub
© 2021-2025 Red Hat, Inc. Deploys by Netlify