PatternFly Elements - Home PatternFly Elements

Cta

Overview

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

Default Primary Secondary Secondary with wind variant Disabled

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-palette="lightest">
    <a href="https://patternflyelements.org">Learn more about PatternFly Elements</a>
  </pfe-cta>

  <pfe-cta priority="secondary" color-palette="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

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.

DOM Property
priority
Type
'primary'|'secondary' | undefined
Default
unknown
color-palette

Sets color palette, which affects the element's styles as well as descendants' color theme. Overrides parent color context. Your theme will influence these colors so check there first if you are seeing inconsistencies. See CSS Custom Properties for default values

DOM Property
colorPalette
Type
ColorPalette | undefined
Default
unknown
on

Sets color theme based on parent context

DOM Property
on
Type
ColorTheme | undefined
Default
unknown
variant

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>
DOM Property
variant
Type
'wind' | undefined
Default
unknown

DOM Properties

data
Type
CtaData
Default
{}
cta

The slotted <a> or <button> element

Type
HTMLAnchorElement|HTMLButtonElement|null
Default
null

Deprecated DOM Properties
color
Note: color is deprecated.

use color-palette
Type
ColorPalette | undefined
Default
unknown

Methods

None

Events

select

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

Event Type: 
CtaSelectEvent

Deprecated Events
pfe-cta:select

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

Note: pfe-cta:select is deprecated.

Use select

 Event Type: 
CustomEvent<CtaData & { originEvent: Event }>

CSS Custom Properties

CSS Property Description Default
--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

inner border

 transparent
--pfe-cta__inner--BorderColor--focus

inner border

 transparent
--pfe-cta__arrow--Display

arrow element

 inline
--pfe-cta__arrow--Padding

arrow element

 0 .125rem 0 .375rem
--pfe-cta__arrow--MarginLeft

arrow element

 calc(var(--pfe-theme--content-spacer, 24px) \* 0.25)

CSS Shadow Parts

container

container element for slotted CTA