stenc-button

A customizable button web component built with Stencil.

Installation

npm install stenc-button

Usage

Import the Component

import 'stenc-button';

Using with Script Tag

<script type="module" src="https://unpkg.com/stenc-button/dist/stenc-button/stenc-button.esm.js"></script>

Examples

<!-- Basic button -->
<poc-button>Click Me</poc-button>

<!-- Primary variant (default) -->
<poc-button variant="primary" size="medium">Primary Button</poc-button>

<!-- Secondary variant -->
<poc-button variant="secondary">Secondary Button</poc-button>

<!-- Danger variant -->
<poc-button variant="danger">Delete</poc-button>

<!-- Outline variant -->
<poc-button variant="outline">Outline Button</poc-button>

<!-- Different sizes -->
<poc-button size="small">Small</poc-button>
<poc-button size="medium">Medium</poc-button>
<poc-button size="large">Large</poc-button>

<!-- Disabled state -->
<poc-button disabled>Disabled</poc-button>

<!-- Submit button -->
<poc-button type="submit">Submit Form</poc-button>

Props

| Property | Type | Default | Description | |----------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'danger' \| 'outline' | 'primary' | Button style variant | | size | 'small' \| 'medium' \| 'large' | 'medium' | Button size | | disabled | boolean | false | Whether the button is disabled | | type | 'button' \| 'submit' \| 'reset' | 'button' | Button type attribute |

Events

| Event | Description | Detail | |-------|-------------|--------| | pocButtonClick | Emitted when button is clicked | MouseEvent | | pocButtonFocus | Emitted when button receives focus | FocusEvent | | pocButtonBlur | Emitted when button loses focus | FocusEvent |

Methods

| Method | Description | Returns | |--------|-------------|---------| | setFocus() | Programmatically focus the button | Promise<void> | | setBlur() | Programmatically blur the button | Promise<void> | | getClickCount() | Get the number of times button was clicked | Promise<number> | | resetClickCount() | Reset the click count to zero | Promise<void> |

JavaScript Usage

const button = document.querySelector('poc-button');

// Listen to events
button.addEventListener('pocButtonClick', (event) => {
  console.log('Button clicked!', event.detail);
});

// Call methods
await button.setFocus();
const clickCount = await button.getClickCount();

Framework Integration

React

import { defineCustomElements } from 'stenc-button/loader';

// Call this once in your app entry point
defineCustomElements();

function App() {
  return <poc-button variant="primary">Click Me</poc-button>;
}

Vue

<template>
  <poc-button variant="primary">Click Me</poc-button>
</template>

<script>
import { defineCustomElements } from 'stenc-button/loader';
defineCustomElements();
</script>

Angular

In your main.ts:

import { defineCustomElements } from 'stenc-button/loader';
defineCustomElements();

Add to your module:

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

License

MIT