# 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 class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const BasicDemo = () => {
  return Button({ class: "btn btn-primary" }, "Click Me");
};
$mount(BasicDemo, "#demo-basic");
```

### With Loading State

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-loading" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const LoadingDemo = () => {
  const isSaving = $(false);

  return Button(
    {
      class: "btn btn-success",
      loading: isSaving,
      onclick: async () => {
        isSaving(true);
        await new Promise((resolve) => setTimeout(resolve, 2000));
        isSaving(false);
      },
    },
    "Save Changes",
  );
};
$mount(LoadingDemo, "#demo-loading");
```

### With Badge

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-badge" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const BadgeDemo = () => {
  return Button(
    {
      class: "btn btn-outline",
      badge: "3",
      badgeClass: "badge-accent",
    },
    "Notifications",
  );
};
$mount(BadgeDemo, "#demo-badge");
```

### With Tooltip

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const TooltipDemo = () => {
  return Button(
    {
      class: "btn btn-ghost",
      tooltip: "Delete item",
    },
    "Delete",
  );
};
$mount(TooltipDemo, "#demo-tooltip");
```

### Disabled State

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-disabled" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
  </div>
</div>

```javascript
const DisabledDemo = () => {
  const isDisabled = $(true);

  return Button(
    {
      class: "btn btn-primary",
      disabled: isDisabled,
    },
    "Submit",
  );
};
$mount(DisabledDemo, "#demo-disabled");
```

### All Variants

<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
  <div class="card-body">
    <h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
    <div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
  </div>
</div>

```javascript
const VariantsDemo = () => {
  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
    Button({ class: "btn btn-primary" }, "Primary"),
    Button({ class: "btn btn-secondary" }, "Secondary"),
    Button({ class: "btn btn-accent" }, "Accent"),
    Button({ class: "btn btn-ghost" }, "Ghost"),
    Button({ class: "btn btn-outline" }, "Outline"),
  ]);
};
$mount(VariantsDemo, "#demo-variants");
```

<script>
  (function() {
    const initButtonExamples = () => {
      
      // 1. Basic Button
      const basicTarget = document.querySelector('#demo-basic');
      if (basicTarget && !basicTarget.hasChildNodes()) {
        const BasicDemo = () => Button({ class: "btn btn-primary" }, "Click Me");
        $mount(BasicDemo, basicTarget);
      }

      // 2. Loading State
      const loadingTarget = document.querySelector('#demo-loading');
      if (loadingTarget && !loadingTarget.hasChildNodes()) {
        const LoadingDemo = () => {
          const isSaving = $(false);
          return Button({
            class: "btn btn-success",
            loading: isSaving,
            onclick: async () => {
              isSaving(true);
              await new Promise(resolve => setTimeout(resolve, 2000));
              isSaving(false);
            }
          }, "Save Changes");
        };
        $mount(LoadingDemo, loadingTarget);
      }

      // 3. Badge
      const badgeTarget = document.querySelector('#demo-badge');
      if (badgeTarget && !badgeTarget.hasChildNodes()) {
        const BadgeDemo = () => Button({
          class: "btn btn-outline",
          badge: "3",
          badgeClass: "badge-accent"
        }, "Notifications");
        $mount(BadgeDemo, badgeTarget);
      }

      // 4. Tooltip
      const tooltipTarget = document.querySelector('#demo-tooltip');
      if (tooltipTarget && !tooltipTarget.hasChildNodes()) {
        const TooltipDemo = () => Button({
          class: "btn btn-ghost",
          tooltip: "Delete item"
        }, "Delete");
        $mount(TooltipDemo, tooltipTarget);
      }

      // 5. Disabled State
      const disabledTarget = document.querySelector('#demo-disabled');
      if (disabledTarget && !disabledTarget.hasChildNodes()) {
        const DisabledDemo = () => {
          const isDisabled = $(true);
          return Button({
            class: "btn btn-primary",
            disabled: isDisabled
          }, "Submit");
        };
        $mount(DisabledDemo, disabledTarget);
      }

      // 6. All Variants
      const variantsTarget = document.querySelector('#demo-variants');
      if (variantsTarget && !variantsTarget.hasChildNodes()) {
        const VariantsDemo = () => Div({ class: "flex flex-wrap gap-2 justify-center" }, [
          Button({ class: "btn btn-primary" }, "Primary"),
          Button({ class: "btn btn-secondary" }, "Secondary"),
          Button({ class: "btn btn-accent" }, "Accent"),
          Button({ class: "btn btn-ghost" }, "Ghost"),
          Button({ class: "btn btn-outline" }, "Outline")
        ]);
        $mount(VariantsDemo, variantsTarget);
      }
    };

    // Ejecutar la función después de definirla
    initButtonExamples();
    
    // Registrar para navegación en Docsify
    if (window.$docsify) {
      window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
        hook.doneEach(initButtonExamples);
      });
    }
  })();
</script>