sebas-simple-button
v0.2.3
Published
A simple styled button component
Maintainers
bastikReadme
sebas-simple-button
A simple, framework-agnostic button component built with Vue 3 Web Components.
Features
- ✅ Framework-agnostic (works with vanilla JS, React, Angular, Vue, etc.)
- ✅ TypeScript support
- ✅ Shadow DOM encapsulation
- ✅ Custom events
- ✅ Multiple style variants
- ✅ Click counter for testing
- ✅ Small bundle size (~1.3 KB gzipped)
Installation
npm install sebas-simple-buttonUsage
Vanilla JavaScript / HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Button Example</title>
</head>
<body>
<!-- Use the component -->
<simple-button label="Click me!" variant="primary"></simple-button>
<simple-button label="Secondary" variant="secondary"></simple-button>
<simple-button label="Success" variant="success"></simple-button>
<simple-button label="Disabled" disabled></simple-button>
<script type="module">
import { register } from 'sebas-simple-button';
// Register the custom element
register();
// Listen for click events
document.querySelectorAll('simple-button').forEach(button => {
button.addEventListener('button-click', (event) => {
console.log('Button clicked!', event.detail);
});
});
</script>
</body>
</html>With NPM/Build Tools
import { register } from 'sebas-simple-button';
// Register the custom element once in your app
register();Then use in your HTML:
<simple-button
label="Click me!"
variant="primary"
></simple-button>Using UMD (CDN)
<script src="https://unpkg.com/sebas-simple-button"></script>
<script>
// The component is automatically registered
</script>
<simple-button label="Click me!"></simple-button>API
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| label | string | 'Click me' | Button text content |
| variant | 'primary' \| 'secondary' \| 'success' | 'primary' | Button style variant |
| disabled | boolean | false | Disable the button |
Events
| Event | Detail | Description |
|-------|--------|-------------|
| button-click | { count: number } | Emitted when button is clicked. Contains click count for testing. |
Slots
The component supports a default slot for custom content:
<simple-button>
<span style="color: red;">Custom Content</span>
</simple-button>Styling
The component uses Shadow DOM for style encapsulation. All styles are scoped to the component and won't leak to the rest of your application.
Variants
- primary: Blue background
- secondary: Gray background
- success: Green background
All variants include hover effects and smooth transitions.
Development
# Install dependencies
npm install
# Start development server (examples)
npm run dev:examples
# Build the package
npm run build
# Preview built examples
npm run previewBrowser Support
Works in all modern browsers that support:
- Custom Elements v1
- Shadow DOM v1
- ES Modules
License
MIT