ConfirmButton

Asks in an alert dialog before acting.

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

Usage

razor

<form method="post" @formname="project" @onsubmit="Act">
    <AntiforgeryToken />
    <ConfirmButton Title="Delete this project?" Message="This can't be undone."
                   ConfirmText="Delete" Accent="Accent.Danger"
                   Name="intent" Value="delete" OnConfirm="Delete">Delete</ConfirmButton>
</form>

@code {
    // Static pages: confirming posts intent=delete with the form.
    [SupplyParameterFromForm(FormName = "project", Name = "intent")]
    private string? Intent { get; set; }

    private void Act()
    {
        if (Intent == "delete") Delete();
    }

    // Interactive pages: confirming runs OnConfirm, and nothing is posted.
    private void Delete() { /* delete it */ }
}

A ConfirmButton asks before an action that's hard to undo: it opens a small alert dialog, and only the dialog's confirm button carries the action out. Inside a form, confirming submits it, with JavaScript off too; the dialog sits beside the button, inside the form it submits. For a question asked from C#, use DialogService.ConfirmAsync on an interactive page (see Dialog).

Confirming a form post

Use Name and Value to post which action was confirmed, so one handler can tell them apart, and OnConfirm for the same action on an interactive page.

Preview Code

Preview

Code

FormPost.razor

<form method="post" @onsubmit="Posted" @formname="project-actions" data-enhance>
    <AntiforgeryToken />
    <Row Gap="3" Wrap Align="Align.Center">
        <TextBlock As="span" Weight="FontWeight.Medium">Website redesign</TextBlock>
        <ConfirmButton Title="Archive this project?" Message="It moves to Archived, where you can restore it."
                       ConfirmText="Archive" Name="intent" Value="archive" OnConfirm='() => Done("archive")'
                       Variant="ButtonVariant.Outline" Accent="Accent.Neutral" Size="ControlSize.Sm">Archive</ConfirmButton>
        <ConfirmButton Title="Delete this project?" Message="This removes the project and its history. It can't be undone."
                       ConfirmText="Delete" Name="intent" Value="delete" OnConfirm='() => Done("delete")'
                       Variant="ButtonVariant.Outline" Accent="Accent.Danger" Size="ControlSize.Sm" StartIcon="Lucide.Trash">Delete</ConfirmButton>
    </Row>
    @if (_result is not null)
    {
        <TextBlock Size="TextSize.Sm" Color="Color.Muted" MarginTop="3">@_result</TextBlock>
    }
</form>

@code {
    // Static pages: confirming posts the form with the button's Name=Value.
    [SupplyParameterFromForm(FormName = "project-actions", Name = "intent")]
    private string? Intent { get; set; }

    private string? _result;

    private void Posted() => Done(Intent);

    // Interactive pages: confirming runs OnConfirm instead.
    private void Done(string? intent) => _result = intent switch
    {
        "archive" => "Archived Website redesign.",
        "delete" => "Deleted Website redesign.",
        _ => null,
    };
}

Live: Confirming runs OnConfirm in C#, and nothing is posted.

Don't use action, method or target as the Name: a control with one of those names hides the form's own property, and the post goes to the wrong address. An interactive page handles the form in C# without posting it, so nothing fills [SupplyParameterFromForm] there: give each button an OnConfirm, as the example does. On a static page the confirm button submits the form whether or not OnConfirm is set.

Showing what's affected

Use Body for more than a one-line Message, such as a list of what will be deleted, and ConfirmText for the confirm button's words.

Preview Code

Preview

Code

Affected.razor

<form method="post" @onsubmit="() => _deleted = Intent is not null" @formname="delete-files" data-enhance>
    <AntiforgeryToken />
    <Row Gap="3" Wrap Align="Align.Center">
        <TextBlock As="span">3 files selected</TextBlock>
        <ConfirmButton Title="Delete 3 files?" ConfirmText="Delete files" Name="intent" Value="delete"
                       OnConfirm="() => _deleted = true" Accent="Accent.Danger" StartIcon="Lucide.Trash" Size="ControlSize.Sm">
            <Body>
                <ul>
                    <li>q3-report.pdf</li>
                    <li>budget-2026.xlsx</li>
                    <li>team-photo.jpg</li>
                </ul>
                <TextBlock Size="TextSize.Sm" Color="Color.Muted">They stay in the trash for 30 days.</TextBlock>
            </Body>
            <ChildContent>Delete</ChildContent>
        </ConfirmButton>
        @if (_deleted)
        {
            <TextBlock As="span" Size="TextSize.Sm" Color="Color.Muted">Moved 3 files to the trash.</TextBlock>
        }
    </Row>
</form>

@code {
    [SupplyParameterFromForm(FormName = "delete-files", Name = "intent")]
    private string? Intent { get; set; }

    private bool _deleted;
}

Live: Confirming runs OnConfirm in C#, and nothing is posted.

Name the action on the confirm button ("Delete files", not "OK"), so the choice reads on its own.

Other ways to confirm

Use Href to follow a link when confirmed, Form with a form's id to submit a form elsewhere on the page, or FormAction to post the form it's in to another address.

razor

@* Follow a link. *@
<ConfirmButton Title="Sign out?" Href="/account/sign-out">Sign out</ConfirmButton>

@* Submit a form elsewhere on the page. *@
<ConfirmButton Title="Discard this draft?" Form="draft" Name="intent" Value="discard"
               Accent="Accent.Danger">Discard</ConfirmButton>

@* Post the form it's in to another address. *@
<form method="post" action="/orders/1042">
    <AntiforgeryToken />
    <ConfirmButton Title="Cancel this order?" FormAction="/orders/1042/cancel"
                   Accent="Accent.Danger">Cancel order</ConfirmButton>
</form>

Opening it

The button opens its dialog with the browser's own command attribute, and IzzyBlazor's script does the same where the browser lacks it. That attribute arrived in Chrome and Edge 135, Firefox 144 and Safari 26.2; for older browsers with JavaScript off, keep a way to act without the dialog, such as a separate page for deleting. On an interactive page, set Loading while OnConfirm's work runs: the button can't open the dialog again until it's done.

Its own words

Use ConfirmText for the confirm button ("Confirm") and CancelText for Cancel ("Cancel"), or set them for the whole app as in Text and other languages.

Parts

Written inside ConfirmButton. The API page lists their parameters.

ConfirmDialogContent: DialogService.ConfirmAsync's content: the message, and Cancel (focused first) and confirm buttons.

Mode support

What works in each mode, ConfirmButton
Feature	Off	Static	Live
Opens its dialog (with JavaScript off, in browsers with the command attribute)	Partly	Yes	Yes
Confirming posts the form with Name and Value	Yes	Yes	No
Confirming follows Href	Yes	Yes	Yes
OnConfirm 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

The trigger is a native button with aria-haspopup="dialog"; it opens a modal dialog with role="alertdialog", named by Title and described by Message and Body.
Cancel ("Cancel", CancelText) takes focus when it opens, so Enter doesn't confirm by accident. DialogService's confirmation focuses Cancel first too.
While it's open, focus stays in the dialog; Escape closes it and focus returns to the trigger. A backdrop click doesn't close it, and there's no close button.
With JavaScript off, the trigger opens the dialog only in browsers that support the native command attribute.

Parameters

ConfirmButton parameters
Prop	Type	Default
`Title`The question, such as "Delete this project?".	`string`	Required
`Message`A line under the question, such as "This can't be undone."	`string?`
`Body`More content under the question, such as a list of what will be deleted.	`RenderFragment?`
`ConfirmText`The confirm button's text, such as "Delete".	`string?`	`"Confirm"`
`CancelText`The cancel button's text.	`string?`	`"Cancel"`
`Name`Posted as Name=Value with the form when confirmed, so one handler can tell which action it was.	`string?`
`Value`The value posted with Name.	`string?`
`Form`The id of a form elsewhere on the page to submit when confirmed.	`string?`	`computed`
`FormAction`Submits to this URL instead of the form's own action.	`string?`
`Href`A link to follow when confirmed, in place of submitting a form.	`string?`
`Id`The trigger's id.	`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?`
`OnConfirm`Runs when confirmed, on an interactive page.	`EventCallback`

Plus 16 item props and 4 common props.

Full API