Overview
A call to action is a styled link that entices users to make a selection.

Sample element
Demo
View a live version of this element to see how it can be customized.
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css">
<link rel="stylesheet" href="https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css">
<link rel="stylesheet" href="demo.css">
<script type="module" src="rh-cta.js"></script>
<section id="variants">
<h2>Variants</h2>
<rh-cta><a href="#default">Default</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</section>
<rh-context-provider id="dark" color-palette="darkest">
<h2>Dark Colour Context</h2>
<rh-cta><a href="#default">Default</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">Default Video</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">Primary</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Video</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">Secondary</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">Brick</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Brick Icon</a></rh-cta>
</rh-context-provider>
<section dir="rtl">
<h2>Right-to-Left Languages</h2>
<rh-cta><a href="#default">ברירת מחדל</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</section>
<section dir="rtl">
<h2>Deep Shadow RTL</h2>
<p dir="ltr">When the CTA is found within the shadow root of an element which is itself within a RTL context.</p>
<shadow-root>
<template shadowroot="open">
<style>
:host {
display: flex;
flex-flow: row wrap;
gap: 16px;
}
</style>
<rh-cta id="deep"><a href="#default">ברירת מחדל</a></rh-cta>
<rh-cta icon="circle-play"><a href="#default-video">ברירת מחדל - וידאו</a></rh-cta>
<rh-cta variant="primary"><a href="#primary">ראשי</a></rh-cta>
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">ראשי - וידאו</a></rh-cta>
<rh-cta variant="secondary"><a href="#secondary">משני</a></rh-cta>
<rh-cta variant="brick"><a href="#brick">לבנה</a></rh-cta>
<rh-cta variant="brick" icon="user"><a href="#brick-icon">לבנה עם אייקון</a></rh-cta>
</template>
</shadow-root>
</section>
<section id="resizing">
<h2>Resizing</h2>
<div class="resize">
<rh-cta><a href="#default">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play"><a href="#default-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary"><a href="#primary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play"><a href="#primary-video">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary"><a href="#secondary">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick"><a href="#brick">Get product details</a></rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user"><a href="#brick-icon">Get product details</a></rh-cta>
</div>
</section>
<section id="resizing">
<h2>Extra-long words</h2>
<div class="resize">
<rh-cta>
<a href="#default">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta icon="circle-play">
<a href="#default-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary">
<a href="#primary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="primary" icon="circle-play">
<a href="#primary-video">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="secondary">
<a href="#secondary">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick">
<a href="#brick">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
<br>
<div class="resize">
<rh-cta variant="brick" icon="user">
<a href="#brick-icon">Supercalifragilisticexpialidocious</a>
</rh-cta>
</div>
</section>
<section id="wrap">
<h2>Force wrap to test arrow line-wrap</h2>
<p>No matter the container size, the arrow trailing the CTA message should never appear on a line by itself.</p>
<div class="resize">
<rh-cta><a href="#default">Default link cta with longer text</a></rh-cta>
</div>
<div class="resize" dir="rtl">
<rh-cta><a href="#default">קריאה לפעולה בררית מחדל עם טקסט ארוך</a></rh-cta>
</div>
</section>
<section id="link-button" class="grid">
<h2>Link and button styles (displayed inline)</h2>
<rh-cta><a href="">Link</a></rh-cta>
<rh-cta><button>Button</button></rh-cta>
<rh-cta variant="primary"><a href="">Link</a></rh-cta>
<rh-cta variant="primary"><button>Button</button></rh-cta>
<rh-cta variant="secondary"><a href="">Link</a></rh-cta>
<rh-cta variant="secondary"><button>Button</button></rh-cta>
</section>
When to use
- When you need users to navigate to a different page or domain
- When you need to arrange links in different arrangements like in a row or grid
- When you need to hide or reveal content
Related elements or patterns
Feedback
To give feedback about anything on this page, contact us.
Red Hat legal and privacy links
- About Red Hat
- Jobs
- Events
- Locations
- Contact Red Hat
- Red Hat Blog
- Diversity, equity, and inclusion
- Cool Stuff Store
- Red Hat Summit