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.

4.7 KiB Raw Blame History