open-index/open-npm huggingface dataset:
npm package: @samuelvernon/button
Description: Samuel Vernon Button
Author: Vlad Sasu aka Samuel Vernon
Latest version: 1.1.7

# @samuelvernon/button

Ein benutzerdefiniertes HTML-Button-Element als Web Component, das erweiterte Funktionalität bietet, wie z. B. Text, Bildintegration und Event-Handling – alles über HTML-Attribute und einfache JavaScript-Konfiguration steuerbar.

## ✨ Features

- Einfach per HTML-Tag einbindbar: `<sv-button>`
- Konfigurierbare Attribute: Text, Bild, Typ, Klassen
- Event-Handling über eine einfache JavaScript-Konfiguration
- Keine Abhängigkeiten erforderlich
- Unterstützung für eigene Wrapper-Klassen und Designs

## 🚀 Installation

```bash
npm install @samuelvernon/button
```

Oder per CDN:

```html
<script type="module" src="https://unpkg.com/@samuelvernon/button"></script>
```

## 🧪 Beispiel

### HTML

```html
<sv-button
  id="action-button"
  class="sv-button sv-no-background"
  classWrapper="sv-button-wrapper"
  src="/assets/icon.png"
  text="Click me"
  type="action"
></sv-button>
```

### TypeScript / JavaScript

```ts
const handleClick = () => alert('Clicked!');

const btn = document.querySelector('#action-button') as any;

btn.configs = {
  ...btn.configs,
  handleClick,
};
```

## ⚙️ Unterstützte Attribute

| Attribut       | Beschreibung                                              |
|----------------|-----------------------------------------------------------|
| `text`         | Textinhalt des Buttons                                    |
| `src`          | URL eines Bildes, das im Button angezeigt wird            |
| `type`         | Button-Typ (frei definierbar, z. B. `"action"`)           |
| `class`        | Zusätzliche Klassen für den Button selbst                 |
| `classWrapper` | Klassenname für das Wrapper-Element um den Button         |

## 🧩 JavaScript-Konfiguration

Per JavaScript oder TypeScript kann der Button nachträglich konfigurieren werden. Das wichtigste ist die `configs`-Eigenschaft, über die z. B. ein `handleClick` definiert werden kann:

```ts
btn.configs = {
  handleClick: () => {
    console.log("Button clicked");
  },
};
```

## 📦 Verwendung in Frameworks

Da es sich um eine native Web Component handelt, kann `<sv-button>` problemlos in Frameworks wie React, Vue, Angular usw. verwenden werden.

## 🛠 Entwicklung

Dieses Paket ist in TypeScript geschrieben und als ES-Modul exportiert. Weitere Anpassungen und Erweiterungen sind möglich.

## 📄 Lizenz

MIT

---

© 2025 Samuel Vernon
npm package: @samui-build/core
Description: Solana Javascript API
Author: Solana Labs Maintainers
Latest version: 1.0.0

[![npm][npm-image]][npm-url]
[![npm-downloads][npm-downloads-image]][npm-url]
<br />
[![code-style-prettier][code-style-prettier-image]][code-style-prettier-url]

[code-style-prettier-image]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square
[code-style-prettier-url]: https://github.com/prettier/prettier
[npm-downloads-image]: https://img.shields.io/npm/dm/@samui-build/react/latest.svg?style=flat
[npm-image]: https://img.shields.io/npm/v/@samui-build/react/latest.svg?style=flat
[npm-url]: https://www.npmjs.com/package/@samui-build/react/v/latest

# @samui-build/core

This is the core library.