PatternFly Elements - Home PatternFly Elements

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