# Button

A styled button component with variant and size presets built from Tailwind utility classes.

---

## Basic Usage

```razor
<Button>Default Button</Button>
<Button Type="submit">Submit</Button>
<Button Disabled="true">Can't Click</Button>
```

---

## Variants

Use the `Variant` parameter with constants from `ButtonVariant`:

```razor
<Button Variant="@ButtonVariant.Default">Default</Button>
<Button Variant="@ButtonVariant.Secondary">Secondary</Button>
<Button Variant="@ButtonVariant.Destructive">Destructive</Button>
<Button Variant="@ButtonVariant.Outline">Outline</Button>
<Button Variant="@ButtonVariant.Ghost">Ghost</Button>
<Button Variant="@ButtonVariant.Link">Link</Button>
```

| Constant | Tailwind Classes |
|---|---|
| `ButtonVariant.Default` | `bg-primary text-primary-foreground shadow hover:bg-primary/90` |
| `ButtonVariant.Destructive` | `bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90` |
| `ButtonVariant.Outline` | `border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground` |
| `ButtonVariant.Secondary` | `bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80` |
| `ButtonVariant.Ghost` | `hover:bg-accent hover:text-accent-foreground` |
| `ButtonVariant.Link` | `text-primary underline-offset-4 hover:underline` |

You can also pass any custom Tailwind class string directly:

```razor
<Button Variant="bg-blue-600 text-white hover:bg-blue-700">Custom</Button>
```

### Creating Custom Variants

Since `Variant` and `Size` are plain strings (not enums), you can create your own variant constants without modifying the library. Define a static class in your app with any Tailwind utility combinations you need:

```csharp
public static class AppButtonVariant
{
    public const string Success =
        "bg-green-600 text-white shadow-sm hover:bg-green-700";

    public const string Warning =
        "bg-amber-500 text-white shadow-sm hover:bg-amber-600";

    public const string Info =
        "bg-sky-500 text-white shadow-sm hover:bg-sky-600";

    public const string OutlineDestructive =
        "border border-destructive text-destructive bg-transparent shadow-sm hover:bg-destructive/10";

    public const string Gradient =
        "bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-sm hover:from-purple-600 hover:to-pink-600";
}
```

Then use them exactly like the built-in variants:

```razor
<Button Variant="@AppButtonVariant.Success">Save Changes</Button>
<Button Variant="@AppButtonVariant.Warning">Proceed with Caution</Button>
<Button Variant="@AppButtonVariant.Gradient">Upgrade Plan</Button>
```

You can do the same for custom sizes:

```csharp
public static class AppButtonSize
{
    public const string Xs   = "h-7 rounded-md px-2 text-xs";
    public const string Xl   = "h-12 rounded-lg px-10 text-base";
    public const string Wide = "h-9 px-12 py-2";
}
```

```razor
<Button Size="@AppButtonSize.Xl" Variant="@AppButtonVariant.Gradient">
    Get Started
</Button>
```

This approach works because the `Button` component simply concatenates the variant and size strings into the element's `class` attribute — there is no closed set of allowed values.

---

## Sizes

Use the `Size` parameter with constants from `ButtonSize`:

```razor
<Button Size="@ButtonSize.Sm">Small</Button>
<Button Size="@ButtonSize.Default">Default</Button>
<Button Size="@ButtonSize.Lg">Large</Button>
<Button Size="@ButtonSize.Icon">🔔</Button>
```

| Constant | Tailwind Classes |
|---|---|
| `ButtonSize.Default` | `h-9 px-4 py-2` |
| `ButtonSize.Sm` | `h-8 rounded-md px-3 text-xs` |
| `ButtonSize.Lg` | `h-10 rounded-md px-8` |
| `ButtonSize.Icon` | `h-9 w-9` |

---

## Button with Icon

Use the `Icon` render fragment to prepend an icon:

```razor
<Button>
    <Icon>
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"
             fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M5 12h14" /><path d="m12 5 7 7-7 7" />
        </svg>
    </Icon>
    <ChildContent>Continue</ChildContent>
</Button>
```

---

## Parameters

| Parameter | Type | Default | Description |
|---|---|---|---|
| `ChildContent` | `RenderFragment?` | — | Button label content |
| `Icon` | `RenderFragment?` | — | Icon slot rendered before the label |
| `Type` | `string` | `"button"` | HTML button type (`button`, `submit`, `reset`) |
| `Disabled` | `bool` | `false` | Disables the button |
| `Variant` | `string` | `ButtonVariant.Default` | Visual style classes |
| `Size` | `string` | `ButtonSize.Default` | Size classes |
| `Class` | `string?` | — | Additional CSS classes appended |

All unmatched HTML attributes (`data-testid`, `aria-*`, etc.) are passed through via `@attributes`.