> # Button(props, children?: string | Signal | [...]): HTMLElement

---

## Props

| Prop         | Type                         | Default             | Description                      |
| :----------- | :--------------------------- | :------------------ | :------------------------------- |
| `class`      | `string`                     | `''`                | Additional CSS classes (daisyUI) |
| `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               |

## Class Options

For more detailed information about the underlying styling system, visit the daisyUI documentation:

- [daisyUI Button](https://daisyui.com/components/button)

| Class Name      | Category      | Description                           |
| :-------------- | :------------ | :------------------------------------ |
| `btn-neutral`   | `Color` 🎨    | Neutral brand color                   |
| `btn-primary`   | `Color` 🎨    | Primary brand color                   |
| `btn-secondary` | `Color` 🎨    | Secondary brand color                 |
| `btn-accent`    | `Color` 🎨    | Accent brand color                    |
| `btn-info`      | `Color` 🎨    | Informational blue color              |
| `btn-success`   | `Color` 🎨    | Success green color                   |
| `btn-warning`   | `Color` 🎨    | Warning yellow color                  |
| `btn-error`     | `Color` 🎨    | Error red color                       |
| `btn-xl`        | `Size` 📏     | Extra large scale                     |
| `btn-lg`        | `Size` 📏     | Large scale                           |
| `btn-md`        | `Size` 📏     | Medium scale (Default)                |
| `btn-sm`        | `Size` 📏     | Small scale                           |
| `btn-xs`        | `Size` 📏     | Extra small scale                     |
| `btn-outline`   | `Style` ✨    | Transparent with colored border       |
| `btn-dash`      | `Style` ✨    | Dashed border style                   |
| `btn-soft`      | `Style` ✨    | Low opacity background color          |
| `btn-ghost`     | `Style` ✨    | No background, hover effect only      |
| `btn-link`      | `Style` ✨    | Looks like a text link                |
| `btn-square`    | `Shape` 📐    | 1:1 aspect ratio                      |
| `btn-circle`    | `Shape` 📐    | 1:1 aspect ratio with rounded corners |
| `btn-wide`      | `Shape` 📐    | Extra horizontal padding              |
| `btn-block`     | `Shape` 📐    | Full width of container               |
| `btn-active`    | `Behavior` ⚙️ | Forced active/pressed state           |
| `btn-disabled`  | `Behavior` ⚙️ | Visual and functional disabled state  |

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

<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 Button(
    {
      class: "btn-outline",
      badge: "3",
      badgeClass: "badge-accent",
    },
    "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 Button(
    {
      class: "btn-ghost",
      tooltip: "Delete item",
    },
    "Delete",
  );
};
Mount(TooltipDemo, "#demo-tooltip");
```

### Disabled State

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

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

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

### All 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");
```

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

```javascript
const TestDemo = () => {
  return Div({ class: "flex flex-wrap gap-2 justify-center" }, [
    Tag("span", {class: "indicator"},[
      5,
      Button('Click')])
  ]);
};
Mount(TestDemo, "#demo-test");
```