# Button

---

## Props

| Prop       | Type                         | Description                                            |
| :--------- | :--------------------------- | :----------------------------------------------------- |
| `class`    | `string`                     | Additional CSS classes                                 |
| `loading`  | `boolean \| Signal<boolean>` | Shows a spinner and disables the button                |
| `disabled` | `boolean \| Signal<boolean>` | Disabled state                                         |
| `icon`     | `string \| VNode \| Signal`  | Icon displayed before the text                         |
| `onclick`  | `function`                   | Click event handler                                    |
| `type`     | `string`                     | Native button type (`'button'`, `'submit'`, `'reset'`) |

---

## Classes (daisyUI)

| Category | Keywords | Description |
| :--- | :--- | :--- |
| Color | `btn-primary`, `btn-secondary`, `btn-accent`, `btn-ghost`, `btn-info`, `btn-success`, `btn-warning`, `btn-error` | Visual color variants |
| Size | `btn-xs`, `btn-sm`, `btn-md`, `btn-lg`, `btn-xl` | Button scale |
| Style | `btn-outline`, `btn-soft`, `btn-dash`, `btn-link` | Visual style variants |
| Shape | `btn-circle`, `btn-square`, `btn-wide`, `btn-block` | Button shape |
| State | `btn-active`, `btn-disabled` | Forced visual states |

> SigProUI supports styling via daisyUI independently or combined with the `ui` prop.
> For further details, check the [daisyUI Button Documentation](https://daisyui.com/components/button) – Full reference for CSS classes.

### Example

```javascript
Button({ class: "btn-primary btn-lg btn-circle gap-4"}, "Click Me");
// Applies: primary color, large size, circular shape
// class is any css class from pure css or favorite framework
```

---

## Examples

### Basic Button

<div id="demo-basic" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

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

### With Loading State

<div id="demo-loading" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

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

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

### With Icon

<div id="demo-icon" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

```javascript
const IconDemo = () => {
  return Button(
    {
      class: "btn-primary",
      icon: "⭐",
    },
    "Favorite",
  );
};
$mount(IconDemo, "#demo-icon");
```

### With Badge (using Indicator)

<div id="demo-badge" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

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

### With Tooltip

<div id="demo-tooltip" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

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

### Combined (Badge + Tooltip)

<div id="demo-combined" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

```javascript
const CombinedDemo = () => {
  const count = $(0);
  return Tooltip(
    { tip: () => `${count()} likes` },
    Indicator(
      { value: count, class: "badge-accent" },
      Button(
        {
          class: "btn-primary btn-lg",
          icon: "👍",
          onclick: () => count(count() + 1),
        },
        "Like",
      )
    ),
  );
};
$mount(CombinedDemo, "#demo-combined");
```

### All Color Variants

<div id="demo-variants" class="card bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>

```javascript
const VariantsDemo = () => {
  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
    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"),
  ]);
};
$mount(VariantsDemo, "#demo-variants");
```