Call to action

Overview

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.

Installation

npm install @patternfly/pfe-cta

Usage

<pfe-cta>
  <a href="https://github.com/">GitHub</a>
</pfe-cta>

<pfe-cta priority="primary">
  <a href="https://patternflyelements.org">Learn more about PatternFly Elements</a>
</pfe-cta>

<pfe-cta priority="secondary">
  <a href="https://redhat.com/">Red Hat</a>
</pfe-cta>

<pfe-cta priority="secondary" variant="wind">
  <a href="https://redhat.com/">Red Hat</a>
</pfe-cta>

<pfe-cta priority="primary" color="lightest">
  <a href="https://patternflyelements.org">Learn more about PatternFly Elements</a>
</pfe-cta>

<pfe-cta priority="secondary" color="complement">
  <a href="https://redhat.com/">Red Hat</a>
</pfe-cta>

Slots

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

Attributes

pfe-theme

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

• light (default)
• dark
• saturated

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

priority

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

Variants

variant

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>
</pfe-cta>

Methods

None

Events

pfe-cta:select

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

Styling hooks