# `PUI.Button`

A versatile button component with multiple variants and sizes.

## Basic Usage

    <.button>Click me</.button>

## Variants

Use the `variant` attribute to change the button style:

    <.button variant="default">Default</.button>
    <.button variant="secondary">Secondary</.button>
    <.button variant="destructive">Destructive</.button>
    <.button variant="outline">Outline</.button>
    <.button variant="ghost">Ghost</.button>
    <.button variant="link">Link</.button>

## Sizes

Use the `size` attribute to adjust the button size:

    <.button size="sm">Small</.button>
    <.button size="default">Default</.button>
    <.button size="lg">Large</.button>
    <.button size="icon">
      <.icon name="hero-heart" />
    </.button>

## With Icons

Include icons within the button content:

    <.button>
      <.icon name="hero-heart" class="w-4 h-4" />
      Like
    </.button>

## As Links

Buttons can act as links using standard Phoenix link attributes:

    <.button navigate={~p"/profile"}>Navigate</.button>
    <.button patch={~p"/settings"}>Patch</.button>
    <.button href="/logout">Href</.button>

## Disabled State

    <.button disabled>Disabled</.button>

## Unstyled Variant

Use `variant="unstyled"` for complete control over styling:

    <.button variant="unstyled" class="px-4 py-2 bg-blue-500 text-white rounded">
      Custom Button
    </.button>

## Attributes

| Attribute | Type | Default | Description |
|-----------|------|---------|-------------|
| `variant` | `string` | `"default"` | Button style variant |
| `size` | `string` | `"default"` | Button size: "sm", "default", "lg", "icon" |
| `class` | `string` | `""` | Additional CSS classes |
| `rest` | `global` | - | HTML attributes including `href`, `navigate`, `patch`, `disabled` |

## Slots

| Slot | Description |
|------|-------------|
| `inner_block` | Button content (required) |

# `button`

## Attributes

* `class` (`:string`) - Defaults to `""`.
* `variant` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, `"destructive"`, `"outline"`, `"secondary"`, `"ghost"`, `"link"`, or `"unstyled"`.
* `size` (`:string`) - Defaults to `"default"`. Must be one of `"default"`, `"sm"`, `"lg"`, or `"icon"`.
* Global attributes are accepted. Supports all globals plus: `["href", "navigate", "patch", "method", "download", "name", "value", "disabled"]`.
## Slots

* `inner_block` (required)

---

*Consult [api-reference.md](api-reference.md) for complete listing*