stenciljs-button-component's Introduction

Custom Button Web Component

Custom Button Web Component

Overview

Custom Button Web Component is a simple and lightweight web component built with Stencil.js.

Using this component

Node Modules

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>

CDN

Alternatively, include the component directly from a CDN:

<script type="module" src="https://cdn.jsdelivr.net/npm/[email protected]/dist/stenciljs-button-component/stenciljs-button-component.esm.js"></script>

Integration in HTML

After importing the component, use it in your HTML file:

<kh-button text="Button text" link="button-link"></kh-button>

Customization

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.

Example Using CDN

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/[email protected]/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>

Recommend Projects