Custom Button Web Component is a simple and lightweight web component built with Stencil.js.
Once installed, include the component directly from a CDN in your HTML file:
- Install the component using NPM:
npm i stenciljs-button-component- Script tag: Add the script tag to your HTML file:
<script type="module" src="/node_modules/stenciljs-button-component/dist/stenciljs-button-component/stenciljs-button-component.esm.js"></script>Alternatively, include the component directly from a CDN:
<script type="module" src="https://cdn.jsdelivr.net/npm/stenciljs-button-component@0.1.1/dist/stenciljs-button-component/stenciljs-button-component.esm.js"></script>After importing the component, use it in your HTML file:
<kh-button text="Button text" link="button-link"></kh-button>Easily customize the button by updating the text and link attributes:
<kh-button text="New Text" link="new-link"></kh-button>Feel free to modify the button's behavior based on your specific needs.
Here's a complete example of integrating and customizing the Custom Button Web Component in an HTML project:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stencil Button Component Test</title>
<script type='module' src='https://cdn.jsdelivr.net/npm/stenciljs-button-component@0.1.1/dist/stenciljs-button-component/stenciljs-button-component.esm.js'></script>
</head>
<body>
<kh-button text="Visit Me On NPM" link="https://www.npmjs.com/package/stenciljs-button-component"></kh-button>
</body>
</html>