# 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>

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

### With Loading State

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

```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>

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

### With Tooltip

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

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

### Disabled State

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

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

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

### All Variants

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

```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")
])
```
```