# @patternfly/pfe-button

> Button element for PatternFly Elements

Latest version **1.12.3** (published 2022-02-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @patternfly/pfe-button
pnpm add @patternfly/pfe-button
yarn add @patternfly/pfe-button
bun add @patternfly/pfe-button
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: esm support; no vulnerabilities; high maintenance score.

Warnings: low downloads; no types.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.12.3 |
| Published | 2022-02-01 |
| First published | 2020-08-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 143 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 396 |
| Maintainers | ctrowbri, dgutride, dlabrecq, patternfly-build, jeff-phillips-18, mturley, mwcz, kylebuch8, realredallen, ktotten, evwilkin, schulj12, castastrophe, nicolethoen, heymp, zhawkins |
| Keywords | web-components, html |

## Links

- npm: https://www.npmjs.com/package/@patternfly/pfe-button
- Repository: https://github.com/patternfly/patternfly-elements
- Homepage: https://github.com/patternfly/patternfly-elements#readme
- Issues: https://github.com/patternfly/patternfly-elements/issues
- npm.io page: https://npm.io/package/@patternfly/pfe-button

## Dependencies (1)

- [@patternfly/pfelement](https://npm.io/package/@patternfly/pfelement.md) ^1.12.3

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 1.12.3 (latest) — 2022-02-01
- 2.0.0-next.9 (next) — 2023-01-05
- 2.0.0-next.8 — 2022-12-19
- 2.0.0-next.7 — 2022-10-25
- 2.0.0-next.6 — 2022-10-03
- 2.0.0-next.5 — 2022-08-23
- 2.0.0-next.4 — 2022-07-24
- 2.0.0-next.3 — 2022-04-18
- 2.0.0-next.2 — 2022-03-23
- 2.0.0-next.1 — 2022-02-23
- 2.0.0-next.0 — 2022-02-23
- 1.12.2 — 2021-11-16
- 1.12.1 — 2021-11-16
- 1.12.0 — 2021-11-12
- 1.11.2 — 2021-09-29
- … 24 more at https://npm.io/package/@patternfly/pfe-button/versions

## README

# PatternFly Element | Button Element
This component is a web component wrapper around a standard HTML Button Element.
`<pfe-button>` is heavily influenced by the findings in this post: [Custom
elements, shadow DOM and implicit form submission](https://www.hjorthhansen.dev/shadow-dom-and-forms/). You can expect `<pfe-button>` to work like a normal
HTML Button Element.

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

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

### Size

```html
<pfe-button size="large">
  <button>Large Button</button>
</pfe-button>
```

### Accessibility
`<pfe-button>` addresses the issues associated with typical implementations of
web component buttons. When using a `<pfe-button>` in a `<form>` element, the
`<pfe-button>` will function as a standard button in a `<form>`. You can expect
the button to submit the form.

#### Disabled Attribute
Adding the `disabled` attribute to either the `<pfe-button>` wrapper or the
`<button>` element in the light DOM will disable the button.

```html
<pfe-button disabled>
  <button>Submit</button>
</pfe-button>
```

Or

```html
<pfe-button>
  <button disabled>Submit</button>
</pfe-button>
```

#### Type Attribute
Using the `type` attribute works in the same fashion as the `disabled`
attribute. You can add a `type` attribute to either the `<pfe-button>` wrapper
or the `<button>` element in the light DOM.

```html
<pfe-button type="button or reset or submit">
  <button>Submit</button>
</pfe-button>
```

Or

```html
<pfe-button>
  <button type="button or reset or submit">Submit</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

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

## Dev

    `npm start`

## Test

    `npm run test`

## Build

    `npm run build`

## Demo

From the PFElements root directory, run:

    `npm run demo`

## Code style

Button (and all PFElements) use [Prettier][prettier] to auto-format JS and JSON. The style rules get applied when you commit a change. If you choose to, you can [integrate your editor][prettier-ed] with Prettier to have the style rules applied on every save.

[prettier]: https://github.com/prettier/prettier/
[prettier-ed]: https://prettier.io/docs/en/editors.html
[web-component-tester]: https://github.com/Polymer/web-component-tester

---
_Source: https://npm.io/package/@patternfly/pfe-button · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._