Button

Submits, resets, links or runs C#.

An interactive page: C# runs over a Blazor Server connection.

Usage

razor

@* In a form: posts it, on any page. *@
<Button Submit>Save</Button>

@* A link that looks like a button. *@
<Button Href="docs/get-started">Get started</Button>

@* C# on click, on interactive pages. *@
<Button OnClick="Refresh" Variant="ButtonVariant.Outline">Refresh</Button>

Accents and variants

Use Accent for the color and Variant for the weight. Keep one solid primary button per area.

Preview Code

Preview

Code

Variants.razor

<Row Gap="2" Align="Align.Center" Wrap>
    <Button>Save</Button>
    <Button Variant="ButtonVariant.Soft">Preview</Button>
    <Button Accent="Accent.Neutral" Variant="ButtonVariant.Outline">Cancel</Button>
    <Button Accent="Accent.Neutral" Variant="ButtonVariant.Ghost">Skip</Button>
    <Button Accent="Accent.Danger">Delete</Button>
    <Button Variant="ButtonVariant.Link">Learn more</Button>
</Row>

Submit and reset

Use Submit or Reset inside a Form. The browser does the work, so it posts with JavaScript off too.

Preview Code

Preview

Code

SubmitReset.razor

@using System.ComponentModel.DataAnnotations

<Form Model="Model" FormName="project" OnValidSubmit="Save" MaxWidth="24.Rem" Grow>
    <TextField @bind-Value="Model!.Name" Label="Project name" />
    <Row Gap="2">
        <Button Submit>Save</Button>
        <Button Reset Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Reset</Button>
    </Row>
    @if (_saved is not null)
    {
        <Alert Status="Status.Success">Saved "@_saved".</Alert>
    }
</Form>

@code {
    [SupplyParameterFromForm(FormName = "project")]
    private Project? Model { get; set; }

    private string? _saved;

    protected override void OnInitialized() => Model ??= new();

    private void Save() => _saved = Model!.Name;

    public sealed class Project
    {
        [Required, StringLength(40)]
        public string Name { get; set; } = "Docs site";
    }
}

Live: The same form validates and runs OnValidSubmit over the circuit.

Several submit buttons

Give each one the same Name and its own Value, and the form posts which was pressed. See it run.

razor

<Form Model="Post" FormName="post" OnValidSubmit="Save">
    ...
    <Button Submit Name="intent" Value="publish">Publish</Button>
    <Button Submit Name="intent" Value="draft" Variant="ButtonVariant.Outline">Save draft</Button>
</Form>

@code {
    // "publish" or "draft". Not "action": that name would hide the form's own.
    [SupplyParameterFromForm(FormName = "post", Name = "intent")]
    private string? Intent { get; set; }
}

Links

Use Href to render a link that looks like a button, and External to open it in a new tab.

Preview Code

Preview

Browse components Source on GitHub Button API

Code

Links.razor

<Row Gap="2" Align="Align.Center" Wrap>
    <Button Href="docs/components" EndIcon="Lucide.ArrowRight">Browse components</Button>
    <Button Href="https://github.com/enabledevmode/izzyblazor" External
            Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Source on GitHub</Button>
    <Button Href="docs/components/button/api" Variant="ButtonVariant.Link">Button API</Button>
</Row>

Sizes and icons

Use Size to match the fields beside it, and StartIcon or EndIcon for an icon.

Preview Code

Preview

Code

SizesIcons.razor

<Stack Gap="4" Align="Align.Center">
    <Row Gap="2" Align="Align.Center" Wrap Justify="Justify.Center">
        <Button Size="ControlSize.Sm">Small</Button>
        <Button>Medium</Button>
        <Button Size="ControlSize.Lg">Large</Button>
    </Row>
    <Row Gap="2" Align="Align.Center" Wrap Justify="Justify.Center">
        <Button StartIcon="Lucide.Plus">New project</Button>
        <Button StartIcon="Lucide.Download" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Download</Button>
        <Button EndIcon="Lucide.ArrowRight" Variant="ButtonVariant.Soft">Continue</Button>
    </Row>
</Stack>

Loading and disabled

Use Loading to show a spinner and block clicks, and Disabled to turn the button off.

Preview Code

Preview

Disabled link

Code

States.razor

<Row Gap="2" Align="Align.Center" Wrap>
    <Button Loading>Saving</Button>
    <Button Loading Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Refreshing</Button>
    <Button Disabled>Disabled</Button>
    <Button Disabled Href="docs" Variant="ButtonVariant.Outline">Disabled link</Button>
</Row>

Running C# on click

Use OnClick to run C# on interactive pages; on static pages, use Submit or Href.

Always Live

Preview Code

Preview

Clicked 0 times, saved 0 times

Code

OnClick.razor

<Stack Gap="3" Align="Align.Center">
    <Row Gap="2" Wrap Justify="Justify.Center">
        <Button StartIcon="Lucide.MousePointerClick" OnClick="() => _clicks++">Click me</Button>
        <Button Loading="_saving" OnClick="SaveAsync" Variant="ButtonVariant.Outline" Accent="Accent.Neutral">Save</Button>
    </Row>
    <TextBlock Size="TextSize.Sm" Color="Color.Muted" Align="TextAlign.Center">
        Clicked @_clicks @(_clicks == 1 ? "time" : "times"), saved @_saves @(_saves == 1 ? "time" : "times")
    </TextBlock>
</Stack>

@code {
    private int _clicks;
    private int _saves;
    private bool _saving;

    // Loading blocks further clicks until the work is done.
    private async Task SaveAsync()
    {
        _saving = true;
        await Task.Delay(1000);
        _saving = false;
        _saves++;
    }
}

Use @bind-Pressed for a button that turns something on and off, such as Bold: a click toggles it, and screen readers hear whether it's pressed. On static pages, set Pressed from the server's state and post the change with Submit, Name and Value. A link can't be pressed.

Always Live

Preview Code

Preview

The quick brown fox

Code

Toggle.razor

@* Toggle buttons: @bind-Pressed turns them on and off, and screen readers hear "pressed". *@
<Stack Gap="3" Align="Align.Center">
    <ButtonGroup Label="Text style" Attached Variant="ButtonVariant.Outline" Accent="Accent.Neutral">
        <IconButton Icon="Lucide.Bold" Label="Bold" @bind-Pressed="_bold" />
        <IconButton Icon="Lucide.Italic" Label="Italic" @bind-Pressed="_italic" />
        <IconButton Icon="Lucide.Underline" Label="Underline" @bind-Pressed="_underline" />
    </ButtonGroup>
    <TextBlock Weight="@(_bold ? FontWeight.Bold : FontWeight.Normal)" Italic="_italic" Decoration="@(_underline ? TextDecoration.Underline : null)">The quick brown fox</TextBlock>
</Stack>

@code {
    private bool _bold = true;
    private bool _italic;
    private bool _underline;
}

Mode support

What works in each mode, Button
Feature	Off	Static	Live
Submit or reset a form, follow a link	Yes	Yes	Yes
Several submit buttons told apart by Name and Value	Yes	Yes	Yes
Loading and disabled states	Yes	Yes	Yes
OnClick runs C#	No	No	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a native button or a, so Enter, Space and focus work as the browser defines them.
The focus ring shows for keyboard focus only.
An action shown only as an icon needs a name: use IconButton, whose Label is required.
A loading button keeps focus and sets aria-busy; screen readers hear LoadingLabel.
A disabled or loading link loses its href, keeps role="link" and sets aria-disabled.
An external link says it opens a new tab (NewTabLabel), not just with its icon.
A toggle (Pressed) sets aria-pressed, so screen readers hear "pressed" or "not pressed"; pressed, it shows an edge in the accent color as well as a tint.

Parameters

Button parameters
Prop	Type	Default
`Href`Makes it a link to this URL (an a) instead of a button.	`string?`
`External`For a link: opens in a new tab with rel="noopener noreferrer" and shows an external-link icon.	`bool`	`false`
`HideExternalIcon`Leaves out an external link's icon, for repeated links where it would be noise.	`bool`	`false`
`NewTabLabel`Read to screen readers after an external link's text.	`string?`	`"(opens in a new tab)"`
`Submit`Submits the form it's in (or Form), like type="submit".	`bool`	`false`
`Reset`Resets the form it's in, like type="reset".	`bool`	`false`
`Name`Posted with the form as Name=Value when this button submits it, so one handler can tell which of several submit buttons was pressed.	`string?`
`Value`The value posted with Name.	`string?`
`FormAction`Submits to this URL instead of the form's own action (native formaction).	`string?`
`Form`The id of a form elsewhere on the page that this button submits (native form).	`string?`
`Accent`Primary (the default) for the main action, Neutral for everything else, Danger for destructive actions, or a custom color (Accent.Of("#0d9488"), Accent.Token("brand")); text on a custom color is chosen for contrast.	`Accent`	`Accent.Primary`
`Variant`Visual weight.	`ButtonVariant`	`ButtonVariant.Solid`
`Size`Height.	`ControlSize`	`ControlSize.Md`
`StartIcon`An icon before the text.	`IconData?`
`EndIcon`An icon after the text.	`IconData?`
`FullWidth`Stretches to the full width of its container.	`bool`	`false`
`Loading`Shows a spinner in place of the start icon and blocks further clicks.	`bool`	`false`
`LoadingLabel`Read to screen readers while Loading.	`string?`	`"Loading"`
`Disabled`Disables the button.	`bool`	`false`
`@bind-Pressed`Makes it a toggle button, such as Bold in an editor: true shows it pressed, false not, and screen readers hear which (aria-pressed).	`bool?`
`ChildContent`The label.	`RenderFragment?`
`OnClick`Runs on click on interactive pages (a link still navigates).	`EventCallback<MouseEventArgs>`

Plus 16 item props and 4 common props.

Full API