149 lines
4.7 KiB
Markdown
149 lines
4.7 KiB
Markdown
# 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`.
|