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>

Slots

None

Attributes

disabled (observed): Disables the button

variant: Changes the style of the button. Possible values are

• primary (default)
• secondary
• tertiary
• danger
• control

size: Changes the size of the button.

• medium (default)
• large

Methods

None

Events

pfe-button:click

This event is fired when <pfe-button> is clicked and serves as a way to capture click events if necessary.

Styling hooks