Button

Clickable button with variants (default, destructive, outline, secondary, ghost, link) and sizes.

Installation

Add the Button component using the CLI:

shadcnblazor component add button

Usage

Basic button with text content. Use ChildContent to render anything inside—text, markup, or components.

<Button>Click Me</Button>

Examples

Size

Use the Size parameter for compact (Sm), default (Md), or larger (Lg) buttons. Sizing affects padding and text scale.

<div class="flex flex-wrap items-center gap-4">
    <Button Size="@Size.Sm">Small</Button>
    <Button Size="@Size.Md">Medium</Button>
    <Button Size="@Size.Lg">Large</Button>
</div>

Variants

Choose a Variant to convey hierarchy: Default for primary actions, Outline for secondary, Ghost for minimal emphasis, Destructive for dangerous actions, and Link for inline-style buttons.

<div class="flex flex-wrap gap-4">
    <Button>Default</Button>
    <Button Variant="@Variant.Destructive">Destructive</Button>
    <Button Variant="@Variant.Outline">Outline</Button>
    <Button Variant="@Variant.Secondary">Secondary</Button>
    <Button Variant="@Variant.Ghost">Ghost</Button>
    <Button Variant="@Variant.Link">Link</Button>
</div>

Content

The button accepts any content via ChildContent. Mix text with inline elements, or use dynamic content. The component handles layout and spacing automatically.

<div class="flex flex-wrap gap-4">
    <Button>Plain text</Button>
    <Button Variant="@Variant.Outline"><strong>Bold</strong> text</Button>
    <Button Variant="@Variant.Secondary">Click <em>here</em></Button>
</div>

Icons

Use Lucide icons (or any SVG) inside the button. Add the icon package and place it alongside text—spacing is handled by the button's built-in gap. Icon-only buttons work with smaller sizes and padding.

@using EasyAppDev.Blazor.Icons.Lucide

<div class="flex flex-wrap gap-4">
    <Button><LuDownload class="h-4 w-4" />Download</Button>
    <Button Variant="@Variant.Outline"><LuMail class="h-4 w-4" />Email</Button>
</div>

Icon-only and accessibility

For icon-only buttons, screen readers need an accessible name. Pass aria-label via AdditionalAttributes—we keep it attribute-only to avoid parameter bloat and stay consistent with HTML.

@using EasyAppDev.Blazor.Icons.Lucide

<div class="flex flex-wrap gap-4">
    <Button aria-label="Close"><LuX class="h-4 w-4" /></Button>
</div>

Spinner

Use State="ButtonState.Loading" for async actions. The button is disabled and gets aria-busy="true" so screen readers announce that it's processing. Render a spinner inside for visual feedback.

<div class="flex flex-wrap gap-4">
    <Button Variant="@Variant.Default" State="@ButtonState.Loading">
        <LuLoaderCircle class="animate-spin size-4 shrink-0" />
        Generating
    </Button>
    <Button Variant="@Variant.Outline" State="@ButtonState.Loading">
        Downloading
        <LuLoaderCircle class="animate-spin size-4 shrink-0" />
    </Button>
</div>

Disabled

Use State="ButtonState.Disabled" when the action is unavailable. Unlike Loading, this sets aria-disabled="true" (not aria-busy)—screen readers announce "disabled" rather than "busy", so users understand the control is inactive, not processing.

<div class="flex flex-wrap gap-4">
    <Button State="@ButtonState.Disabled">Disabled</Button>
    <Button Variant="@Variant.Outline" State="@ButtonState.Disabled">Disabled Outline</Button>
</div>

Interactivity

Wire up OnClick to handle user actions. The handler receives MouseEventArgs. Use component state to drive dynamic labels or behavior.

<Button OnClick="IncrementCount">Clicked @_count times</Button>

@code {
    private int _count;

    private void IncrementCount() => _count++;
}

Button Group

Use ButtonGroup to group related buttons with shared borders and styling. Set Variant for Default, Outline, Ghost, or other styles. Use Role="toolbar" for toolbar groups. Buttons inside the group share the group's visual style.

<div class="flex flex-col gap-4">
    <ButtonGroup Variant="@Variant.Outline">
        <Button>One</Button>
        <Button>Two</Button>
        <Button>Three</Button>
    </ButtonGroup>
    <ButtonGroup Variant="@Variant.Default">
        <Button><LuChevronLeft /></Button>
        <Button><LuChevronRight /></Button>
    </ButtonGroup>
    <ButtonGroup Role="toolbar" Class="w-fit">
        <div class="px-4 flex items-center text-sm">0</div>
        <Button Size="@Size.Sm" Class="px-2.5"><LuMinus /></Button>
        <Button Size="@Size.Sm" Class="px-2.5"><LuPlus /></Button>
    </ButtonGroup>
</div>

API Reference

Button

A clickable button with configurable variant, size, and type.

Properties

Name	Type	Description
`Size`	`Size`	The size of the button.
`Variant`	`Variant`	The visual style variant of the button.
`OnClick`	`EventCallback<MouseEventArgs>`	Callback fired when the button is clicked.
`State`	`Nullable<ButtonState>`	The button state. When Loading, the button is disabled with aria-busy. When Disabled, the button is disabled. When null, normal.
`Type`	`ButtonType`	The HTML button type (button, submit, or reset).
`AdditionalAttributes`	`Dictionary<string, Object>`
`Class`	`string`
`ChildContent`	`RenderFragment`	The content rendered inside the button.

Events

Name	Type	Description
`OnClick`	`EventCallback<MouseEventArgs>`	Callback fired when the button is clicked.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.