PatternFly Elements - Home PatternFly Elements v2 prerelease v1

Call to action


Call to action stands out from regular hypertext links, and is used for linking users to webpages.

Note: pfe-cta is not necessarily a button, though it may look like one visually.


npm install @patternfly/pfe-cta


  <a href="">GitHub</a>

<pfe-cta priority="primary">
  <a href="">Learn more about PatternFly Elements</a>

<pfe-cta priority="secondary">
  <a href="">Red Hat</a>

<pfe-cta priority="secondary" variant="wind">
  <a href="">Red Hat</a>

<pfe-cta priority="primary" color="lightest">
  <a href="">Learn more about PatternFly Elements</a>

<pfe-cta priority="secondary" color="complement">
  <a href="">Red Hat</a>


Default slot

We expect an anchor tag, <a> with an href, to be the first child inside pfe-cta element. Less preferred but allowed for specific use-cases include: <button> (note however that the button tag is not supported for the default CTA styles).



Changes the context of the call-to-action to one of 3 possible themes:

This will override any context being passed from a parent component and will add a style attribute setting the --theme variable.


Indicates the importance of this call-to-action in the context of the page. Will also influence how the call-to-action is styled.



Note: priority="secondary" has a wind variant (variant="wind") that can be applied to change the style of the secondary call-to-action.

<pfe-cta priority="secondary" variant="wind">
  <a href="#">Wind variant</a>





This event is fired when a link is clicked and serves as a way to capture click events if necessary.

Styling hooks

Variable name Default value Region
--pfe-cta--Padding .6rem 0
--pfe-cta--BorderRadius 0
--pfe-cta--BackgroundColor transparent
--pfe-cta--BackgroundColor--hover transparent
--pfe-cta--BackgroundColor--focus transparent
--pfe-cta--BorderColor transparent
--pfe-cta--BorderColor--hover transparent
--pfe-cta--BorderColor--focus transparent
--pfe-cta--Color var(--pfe-theme--color--link, #06c)
--pfe-cta--Color--hover var(--pfe-theme--color--link--hover, #003366)
--pfe-cta--Color--focus var(--pfe-theme--color--link--focus, #003366)
--pfe-cta--TextDecoration none
--pfe-cta--TextDecoration--hover none
--pfe-cta--TextDecoration--focus none
--pfe-cta--LineHeight var(--pfe-theme--line-height, 1.5);
--pfe-cta--FontFamily var(--pfe-theme--font-family--heading, "Overpass", Overpass, Helvetica, helvetica, arial, sans-serif);
--pfe-cta--FontWeight var(--pfe-theme--font-weight--bold, 700);
--pfe-cta__inner--BorderColor transparent inner border
--pfe-cta__inner--BorderColor--focus transparent inner border
--pfe-cta__arrow--Display inline arrow element
--pfe-cta__arrow--Padding 0 .125rem 0 .375rem arrow element
--pfe-cta__arrow--MarginLeft calc(var(--pfe-theme--content-spacer, 24px) * 0.25) arrow element