PatternFly Elements - Home PatternFly Elements

Button

Overview

Buttons allow users to perform an action when triggered. They feature a text label, a background or a border, and icons.

Installation

npm install @patternfly/pfe-button

Usage

When using this component, you must provide a standard HTML Button Element as the only light DOM child of pfe-button.

<pfe-button>
<button>My Button</button>
</pfe-button>

Size

<pfe-button size="large">
<button>Large Button</button>
</pfe-button>
<pfe-button size="medium">
<button>Medium Button</button>
</pfe-button>

Slots

None

Attributes

disabled

Disables the button

DOM Property
disabled
Type
boolean
Default
false
variant

Changes the style of the button. Possible values are

  • primary (default)
  • secondary
  • tertiary
  • danger
  • control
DOM Property
variant
Type
'primary'|'secondary'|'tertiary'|'danger'|'control'
Default
'primary'
size

Changes the size of the button.

DOM Property
size
Type
'medium'|'large'
Default
'medium'
type
DOM Property
type
Type
'button'|'submit'|'reset' | undefined
Default
unknown
on

Sets color theme based on parent context

DOM Property
on
Type
ColorTheme | undefined
Default
unknown

Methods

None

Events

None

Deprecated Events

pfe-button:click
Note: pfe-button:click is deprecated.

use native click event instead

Event Type:
Event

CSS Custom Properties

CSS Property Description Default
--pfe-button--BackgroundColor

no region

var(--pfe-theme--color--ui-accent, #06c)

--pfe-button--Color

no region

var(--pfe-theme--color--ui-base--text, #fff)

--pfe-button--FontSize

no region

var(--pf-global--FontSize--md, 1rem)

--pfe-button--FontWeight

no region

var(--pfe-theme--font-weight--normal, 400)

--pfe-button--Padding

no region

calc(var(--pfe-theme--container-padding, 1rem) / 2) var(--pfe-theme--container-padding, 1rem)

--pfe-button--BorderRadius

no region

var(--pfe-theme--surface--border-radius, 3px)

--pfe-button--LineHeight

no region

var(--pfe-theme--line-height, 1.5)

--pfe-button__after--Border

region after

var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor, transparent)

--pfe-button--BackgroundColor--hover

no region

var(--pfe-theme--color--ui-accent--hover, #004080)

--pfe-button__after--Border--hover

region after

var(--pfe-theme--ui--border-width, 1px) var(--pfe-theme--ui--border-style, solid) var(--pfe-button__after--BorderColor--hover, transparent)

--pfe-button--FontWeight--large

no region

var(--pfe-theme--font-weight--semi-bold, 600)

--pfe-button--Padding--large

no region

12px 24px