sigpro-ui/docs/components/button.md

# Button

Styled button with full DaisyUI support and reactive states.

## Tag

`Button`

## Props

| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `loading` | `boolean \| Signal<boolean>` | `false` | Shows loading spinner |
| `badge` | `string \| Signal<string>` | `-` | Badge text displayed on corner |
| `badgeClass` | `string` | `'badge-secondary'` | Badge styling classes |
| `tooltip` | `string \| Signal<string>` | `-` | Tooltip text on hover |
| `icon` | `string \| VNode \| Signal` | `-` | Icon displayed before text |
| `onclick` | `function` | `-` | Click event handler |
| `type` | `string` | `'button'` | Native button type |

## Live Examples

### Basic Button

<div id="demo-basic"></div>

<script type="module">
  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';

  const Demo = () => {
    return Button({ class: "btn-primary" }, "Click Me");
  };

  $mount(Demo, "#demo-basic");
</script>

```javascript
Button({ class: "btn-primary" }, "Click Me")
```

### With Loading State

<div id="demo-loading"></div>

<script type="module">
  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
  import { Button } from '../../sigpro-ui/sigpro-ui.js';

  const isSaving = $(false);

  const Demo = () => {
    return Button({
      class: "btn-success",
      loading: isSaving,
      onclick: async () => {
        isSaving(true);
        await new Promise(resolve => setTimeout(resolve, 2000));
        isSaving(false);
      }
    }, "Save Changes");
  };

  $mount(Demo, "#demo-loading");
</script>

```javascript
const isSaving = $(false);

Button({
  class: "btn-success",
  loading: isSaving,
  onclick: async () => {
    isSaving(true);
    await saveData();
    isSaving(false);
  }
}, "Save Changes")
```

### With Badge

<div id="demo-badge"></div>

<script type="module">
  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';

  const Demo = () => {
    return Button({
      class: "btn-outline",
      badge: "3",
      badgeClass: "badge-accent"
    }, "Notifications");
  };

  $mount(Demo, "#demo-badge");
</script>

```javascript
Button({
  class: "btn-outline",
  badge: "3",
  badgeClass: "badge-accent"
}, "Notifications")
```

### With Tooltip

<div id="demo-tooltip"></div>

<script type="module">
  import { $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';

  const Demo = () => {
    return Button({
      class: "btn-ghost",
      tooltip: "Delete item"
    }, "Delete");
  };

  $mount(Demo, "#demo-tooltip");
</script>

```javascript
Button({
  class: "btn-ghost",
  tooltip: "Delete item"
}, "Delete")
```

### Disabled State

<div id="demo-disabled"></div>

<script type="module">
  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
  import { Button } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';

  const isDisabled = $(true);

  const Demo = () => {
    return Button({
      class: "btn-primary",
      disabled: isDisabled
    }, "Submit");
  };

  $mount(Demo, "#demo-disabled");
</script>

```javascript
const isDisabled = $(true);

Button({
  class: "btn-primary",
  disabled: isDisabled
}, "Submit")
```

### All Variants

<div id="demo-variants"></div>

<script type="module">
  import { $, $mount } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
  import { Button, Div } from 'https://cdn.jsdelivr.net/npm/sigpro-ui@latest/+esm';

  const isLoading = $(false);

  const Demo = () => {
    return Div({ class: "flex flex-wrap gap-2" }, [
      Button({ class: "btn-primary" }, "Primary"),
      Button({ class: "btn-secondary" }, "Secondary"),
      Button({ class: "btn-accent" }, "Accent"),
      Button({ class: "btn-ghost" }, "Ghost"),
      Button({ class: "btn-outline" }, "Outline"),
      Button({ class: "btn-success", loading: isLoading, onclick: () => {
        isLoading(true);
        setTimeout(() => isLoading(false), 1500);
      } }, "Loading")
    ]);
  };

  $mount(Demo, "#demo-variants");
</script>

```javascript
Div({ class: "flex flex-wrap gap-2" }, [
  Button({ class: "btn-primary" }, "Primary"),
  Button({ class: "btn-secondary" }, "Secondary"),
  Button({ class: "btn-accent" }, "Accent"),
  Button({ class: "btn-ghost" }, "Ghost"),
  Button({ class: "btn-outline" }, "Outline")
])
```
```

## Ventajas de este enfoque:

1. **Ejecución real** - Los ejemplos son interactivos y funcionales
2. **Código visible** - Debajo de cada ejemplo se muestra el código fuente
3. **Aprendizaje visual** - Los usuarios pueden ver y probar los componentes
4. **Reactivo** - Los ejemplos con signals demuestran la reactividad en acción

## Consejos adicionales:

Para mejorar la experiencia, podrías agregar estilos a los contenedores de los ejemplos:

```css
/* En tu HTML, dentro de <style> */
.demo-container {
  margin: 1rem 0;
  padding: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  background: #f8fafc;
}