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.

Default - Medium size

Primary Secondary Danger Secondary Tertiary Danger Warning

Link Link Inline Link Danger Link

Plain button

Control variant

Control

Installation

npm install @patternfly/elements

Usage

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

My Button

<pf-button>My Button</pf-button>

Size

Large Button Medium Button

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

Slots

icon

Contains the button's icon or state indicator, e.g. a spinner.

Default Slot

Must contain exactly one <button> element as the only content not assigned to a named slot.

Attributes

loading-label

ARIA label for the loading indicator

Type
string
Default
'loading'
loading

Represents the state of a stateful button

DOM Property
loading
Type
boolean
Default
false
plain

Applies plain styles

DOM Property
plain
Type
boolean
Default
false
warning

Not as urgent as danger

DOM Property
warning
Type
boolean
Default
false
size
DOM Property
size
Type
'small'|'large' | undefined
Default
unknown
icon-set

Icon set for the icon property

DOM Property
iconSet
Type
string | undefined
Default
unknown
danger
DOM Property
danger
Type
boolean
Default
false
variant

Changes the style of the button.

  • Primary: Used for the most important call to action on a page. Try to limit primary buttons to one per page.
  • Secondary: Use secondary buttons for general actions on a page, that don’t require as much emphasis as primary button actions. For example, you can use secondary buttons where there are multiple actions, like in toolbars or data lists.
  • Tertiary: Tertiary buttons are flexible and can be used as needed.
DOM Property
variant
Type
ButtonVariant
Default
'primary'
disabled

Disables the button

DOM Property
disabled
Type
boolean
Default
false
type
DOM Property
type
Type
'button'|'submit'|'reset' | undefined
Default
unknown
label

Accessible name for the button, use when the button does not have slotted text

DOM Property
label
Type
string | undefined
Default
unknown
value
DOM Property
value
Type
string | undefined
Default
unknown
name
DOM Property
name
Type
string | undefined
Default
unknown
icon

Shorthand for the icon slot, the value is icon name

DOM Property
icon
Type
string | undefined
Default
unknown

Methods

None

Events

None

CSS Custom Properties

CSS Property Description Default
--pf-c-button--FontSize 1rem
--pf-c-button--FontWeight 400
--pf-c-button--LineHeight 1.5
--pf-c-button--PaddingTop 0.375rem
--pf-c-button--PaddingLeft 1rem
--pf-c-button--PaddingBottom 0.375rem
--pf-c-button--PaddingRight 1rem
--pf-c-button--BorderRadius 3px
--pf-c-button--after--BorderColor transparent
--pf-c-button--after--BorderRadius 3px
--pf-c-button--after--BorderWidth 1px
--pf-c-button--active--after--BorderWidth 2px
--pf-c-button--hover--after--BorderWidth 2px
--pf-c-button--focus--after--BorderWidth 2px
--pf-c-button--m-primary--Color #fff
--pf-c-button--m-primary--BackgroundColor #06c
--pf-c-button--m-primary--active--Color #fff
--pf-c-button--m-primary--active--BackgroundColor #004080
--pf-c-button--m-primary--focus--Color #fff
--pf-c-button--m-primary--focus--BackgroundColor #004080
--pf-c-button--m-primary--hover--Color #fff
--pf-c-button--m-primary--hover--BackgroundColor #004080
--pf-c-button--m-secondary--Color #06c
--pf-c-button--m-secondary--BackgroundColor transparent
--pf-c-button--m-secondary--active--Color #06c
--pf-c-button--m-secondary--active--BackgroundColor transparent
--pf-c-button--m-secondary--active--BorderColor #06c
--pf-c-button--m-secondary--focus--Color #06c
--pf-c-button--m-secondary--focus--BackgroundColor transparent
--pf-c-button--m-secondary--focus--BorderColor #06c
--pf-c-button--m-secondary--hover--Color #06c
--pf-c-button--m-secondary--hover--BackgroundColor transparent
--pf-c-button--m-secondary--hover--BorderColor #06c
--pf-c-button--m-tertiary--Color #151515
--pf-c-button--m-tertiary--BackgroundColor transparent
--pf-c-button--m-tertiary--active--Color #151515
--pf-c-button--m-tertiary--active--BackgroundColor transparent
--pf-c-button--m-tertiary--active--BorderColor #151515
--pf-c-button--m-tertiary--focus--Color #151515
--pf-c-button--m-tertiary--focus--BackgroundColor transparent
--pf-c-button--m-tertiary--focus--BorderColor #151515
--pf-c-button--m-tertiary--hover--Color #151515
--pf-c-button--m-tertiary--hover--BackgroundColor transparent
--pf-c-button--m-tertiary--hover--BorderColor #151515
--pf-c-button--m-danger--Color #fff
--pf-c-button--m-danger--BackgroundColor #c9190b
--pf-c-button--m-danger--active--Color #fff
--pf-c-button--m-danger--active--BackgroundColor #a30000
--pf-c-button--m-danger--focus--Color #fff
--pf-c-button--m-danger--focus--BackgroundColor #a30000
--pf-c-button--m-danger--hover--Color #fff
--pf-c-button--m-danger--hover--BackgroundColor #a30000
--pf-c-button--m-secondary--m-danger--Color #c9190b
--pf-c-button--m-secondary--m-danger--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--BorderColor #c9190b
--pf-c-button--m-secondary--m-danger--active--Color #a30000
--pf-c-button--m-secondary--m-danger--active--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--active--BorderColor #c9190b
--pf-c-button--m-secondary--m-danger--focus--Color #a30000
--pf-c-button--m-secondary--m-danger--focus--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--focus--BorderColor #c9190b
--pf-c-button--m-secondary--m-danger--hover--Color #a30000
--pf-c-button--m-secondary--m-danger--hover--BackgroundColor transparent
--pf-c-button--m-secondary--m-danger--hover--BorderColor #c9190b
--pf-c-button--m-control--disabled--BackgroundColor #f0f0f0
--pf-c-button--m-control--BorderRadius 0
--pf-c-button--m-control--after--BorderWidth 1px
--pf-c-button--m-control--after--BorderTopColor #f0f0f0
--pf-c-button--m-control--after--BorderRightColor #f0f0f0
--pf-c-button--m-control--after--BorderBottomColor #8a8d90
--pf-c-button--m-control--after--BorderLeftColor #f0f0f0
--pf-c-button--m-control--Color #151515
--pf-c-button--m-control--BackgroundColor #fff
--pf-c-button--m-control--active--Color #151515
--pf-c-button--m-control--active--BackgroundColor #fff
--pf-c-button--m-control--active--BorderBottomColor #06c
--pf-c-button--m-control--active--after--BorderBottomWidth 2px
--pf-c-button--m-control--focus--Color #151515
--pf-c-button--m-control--focus--BackgroundColor #fff
--pf-c-button--m-control--focus--BorderBottomColor #06c
--pf-c-button--m-control--focus--after--BorderBottomWidth 2px
--pf-c-button--m-control--hover--Color #151515
--pf-c-button--m-control--hover--BackgroundColor #fff
--pf-c-button--m-control--hover--BorderBottomColor #06c
--pf-c-button--m-control--hover--after--BorderBottomWidth 2px
--pf-c-button--disabled--Color #6a6e73
--pf-c-button--disabled--BackgroundColor #d2d2d2
--pf-c-button--disabled--after--BorderColor transparent
--pf-c-button--m-warning--Color #151515
--pf-c-button--m-warning--BackgroundColor #f0ab00
--pf-c-button--m-warning--active--Color #151515
--pf-c-button--m-warning--active--BackgroundColor #c58c00
--pf-c-button--m-warning--focus--Color #151515
--pf-c-button--m-warning--focus--BackgroundColor #c58c00
--pf-c-button--m-warning--hover--Color #151515
--pf-c-button--m-warning--hover--BackgroundColor #c58c00
--pf-c-button--m-plain--BackgroundColor transparent
--pf-c-button--m-plain--Color #6a6e73
--pf-c-button--m-plain--hover--BackgroundColor transparent
--pf-c-button--m-plain--hover--Color #151515
--pf-c-button--m-plain--focus--BackgroundColor transparent
--pf-c-button--m-plain--focus--Color #151515
--pf-c-button--m-plain--active--BackgroundColor transparent
--pf-c-button--m-plain--active--Color #151515
--pf-c-button--m-plain--disabled--Color #d2d2d2
--pf-c-button--m-plain--disabled--BackgroundColor transparent
© 2022-2023 Red Hat, Inc. Deploys by Netlify