# Button

A styled `<button>` element. Supports six visual variants and four sizes. HTMX attributes can be injected directly via the `hxAttrs` parameter.

---

## HTML structure

```
button[type=$$Type$$, class=$$Classes$$, $$HxAttrs$$]
  $$Label$$
```

---

## CSS mechanics

**Base classes** (always applied):

```
inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium
ring-offset-background transition-colors
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
disabled:pointer-events-none disabled:opacity-50
```

**Variant** appended:

| Variant | Added classes |
|---|---|
| `default` | `bg-primary text-primary-foreground hover:bg-primary/90` |
| `destructive` | `bg-destructive text-destructive-foreground hover:bg-destructive/90` |
| `outline` | `border border-input bg-transparent hover:bg-accent hover:text-accent-foreground` |
| `secondary` | `bg-secondary text-secondary-foreground hover:bg-secondary/80` |
| `ghost` | `hover:bg-accent hover:text-accent-foreground` |
| `link` | `text-primary underline-offset-4 hover:underline` |

**Size** appended:

| Size | Added classes |
|---|---|
| `default` | `h-10 px-4 py-2 text-sm` |
| `sm` | `h-9 rounded-md px-3 text-xs` |
| `lg` | `h-11 rounded-md px-8 text-base` |
| `icon` | `h-10 w-10` |

---

## Constructor signature

```csharp
public Button(
    string label,
    string variant = "default",
    string size    = "default",
    string type    = "button",
    string hxAttrs = "")
```

| Parameter | Description |
|---|---|
| `label` | Button text (raw HTML — can include inline SVG) |
| `variant` | Visual style; see table above |
| `size` | Physical size; see table above |
| `type` | HTML button type: `"button"` / `"submit"` / `"reset"` |
| `hxAttrs` | Verbatim string appended as extra HTML attributes (HTMX, data-*, etc.) |

---

## Usage examples

### Standard actions

```csharp
new Button("Save changes", type: "submit")
new Button("Cancel",       variant: "outline")
new Button("Delete",       variant: "destructive")
new Button("Learn more",   variant: "link")
```

### Sizes

```csharp
new Button("Small",   size: "sm")
new Button("Default", size: "default")
new Button("Large",   size: "lg")
new Button("⚙",       size: "icon")  // icon-only square button
```

### HTMX trigger

```csharp
new Button(
    "Load more",
    hxAttrs: """hx-get="/items?page=2" hx-target="#item-list" hx-swap="beforeend"""")
```

### Submit button inside a form

```csharp
new Button("Sign in", variant: "default", type: "submit", size: "default")
```

### Ghost button with inline SVG icon

```csharp
new Button(
    label: """
        <svg class="h-4 w-4" .../>
        <span>Refresh</span>
    """,
    variant: "ghost")
```

### Disabled appearance (via HTML)

The Button component does not have a `disabled` constructor parameter. Set it via `hxAttrs` if needed:

```csharp
new Button("Processing...", variant: "default", hxAttrs: "disabled aria-disabled='true'")
```

---

## Tips and tricks

- Use `type: "submit"` only inside `<form>` elements. Outside a form, always use `type: "button"` to prevent accidental page reloads in some browsers.
- `hxAttrs` is written verbatim between the class and the closing `>` of the button tag — you can add any attribute here: `hx-*`, `data-*`, `aria-*`, `onclick`, etc.
- The `ghost` variant has no visible background at rest — use it for toolbar actions or secondary icon buttons.
- The `link` variant looks like an anchor but behaves as a button — useful for inline text actions that trigger JS or HTMX requests rather than navigation.
- To use Button as a DropdownMenu trigger, pass a `Button` instance to `DropdownMenu`'s `trigger` parameter.

---

## Complete page example

**`Templates/SettingsPage.htmx`**
```html
<div class="max-w-lg mx-auto py-10 space-y-6">
  <h1 class="text-2xl font-bold">Settings</h1>
  <div class="flex gap-3">
    $$SaveBtn$$
    $$CancelBtn$$
    $$DangerBtn$$
  </div>
  <div class="border-t pt-4">
    $$LearnMoreLink$$
  </div>
</div>
```

**`Templates/SettingsPage.htmx.cs`**
```csharp
namespace Htmx.ApiDemo.Templates;

public sealed class SettingsPage : SettingsPageBase
{
    private readonly IHtmxComponent _save;
    private readonly IHtmxComponent _cancel;
    private readonly IHtmxComponent _danger;
    private readonly IHtmxComponent _learn;

    public SettingsPage()
    {
        _save   = new Components.Button("Save changes", type: "submit");
        _cancel = new Components.Button("Cancel",       variant: "outline");
        _danger = new Components.Button("Delete account", variant: "destructive",
                      hxAttrs: "data-dialog-open=\"confirm-delete\"");
        _learn  = new Components.Button("Learn more about settings", variant: "link");
    }

    protected override void RenderSaveBtn(HtmxRenderContext ctx)       => _save.Render(ctx.Next());
    protected override void RenderCancelBtn(HtmxRenderContext ctx)     => _cancel.Render(ctx.Next());
    protected override void RenderDangerBtn(HtmxRenderContext ctx)     => _danger.Render(ctx.Next());
    protected override void RenderLearnMoreLink(HtmxRenderContext ctx) => _learn.Render(ctx.Next());
}
```

**GET handler**
```csharp
[Handler]
[MapGet("/settings")]
public static partial class GetSettingsHandler
{
    public record Query();

    private static Task<IResult> HandleAsync(
        Query _,
        HttpContext ctx,
        CancellationToken ct)
        => ctx.WriteHtmxPage(new SettingsPage(), title: "Settings");
}
```