Enciphered.Blazor.UIComponents/docs/components/button.md

Button

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

---

Basic Usage

<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:

<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:

<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:

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:

<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:

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";
}

<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:

<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:

<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.