<pf-button> is a web component wrapper around a standard HTML <button> element.
<pf-button> is heavily influenced by the findings in this post: Custom
elements, shadow DOM and implicit form submission. You can expect <pf-button> to work like a normal HTMLButtonElement.
Read more about Button in the PatternFly Elements Button documentation
Load <pf-button> via CDN:
<script src="https://jspm.dev/@patternfly/elements/pf-button/pf-button.js"></script>Or, if you are using NPM, install it
npm install @patternfly/elementsThen once installed, import it to your application:
import '@patternfly/elements/pf-button/pf-button.js';When using this component, you must provide a standard HTML Button Elements as
the only light DOM child of pf-button.
<pf-button>My Button</pf-button><pf-button> addresses the issues associated with typical implementations of
web component buttons. When using a <pf-button> in a <form> element, the
<pf-button> will function as a standard button in a <form>. You can expect
the button to submit the form.
Adding the disabled attribute to either the <pf-button> wrapper or the
<button> element in the light DOM will disable the button.
<pf-button disabled>Submit</pf-button>Using the type attribute works in the same fashion as the disabled
attribute. You can add a type attribute to the <pf-button> element.
<pf-button type="button">Submit</pf-button>
<pf-button type="submit">Submit</pf-button>
<pf-button type="reset">Reset</pf-button>