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

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

progress-label

ARIA label for the progress 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

disabled

Disables the button

DOM Property

disabled

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'

size

Changes the size of the button.

DOM Property

size

Type

'small'|'large' | undefined

Default

unknown

type

DOM Property

type

Type

'button'|'submit'|'reset' | undefined

Default

unknown

danger

Use danger buttons for actions a user can take that are potentially destructive or difficult/impossible to undo, like deleting or removing user data.

DOM Property

danger

Type

boolean

Default

false

icon

Shorthand for the icon slot, the value is icon name

DOM Property

icon

Type

string

Default

''

Methods

Events

CSS Custom Properties