Alert Dialog

A modal dialog that interrupts the user with important content and expects a response. Unlike Dialog, it cannot be dismissed by clicking the overlay or pressing escape — the user must explicitly choose an action.

Basic

A confirmation dialog with cancel and continue actions.

<AlertDialog @bind-Open="open">
    <AlertDialogTrigger>
        <Button Variant="ButtonVariant.Outline">Delete Account</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
        <AlertDialogHeader>
            <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
            <AlertDialogDescription>
                This action cannot be undone. This will permanently delete
                your account and remove your data from our servers.
            </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialog>

Destructive

Use a destructive button variant for dangerous actions.

<AlertDialog @bind-Open="open">
    <AlertDialogTrigger>
        <Button Variant="ButtonVariant.Destructive">Delete Project</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
        <AlertDialogHeader>
            <AlertDialogTitle>Delete project?</AlertDialogTitle>
            <AlertDialogDescription>
                This will permanently delete the project.
            </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
            <AlertDialogCancel>Cancel</AlertDialogCancel>
            <AlertDialogAction Variant="ButtonVariant.Destructive"
                               OnClick="HandleDelete">
                Delete
            </AlertDialogAction>
        </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialog>

With Callback

Handle user actions with OnClick callbacks.

Result: None

<AlertDialog @bind-Open="open">
    <AlertDialogTrigger>
        <Button>Confirm Action</Button>
    </AlertDialogTrigger>
    <AlertDialogContent>
        <AlertDialogHeader>
            <AlertDialogTitle>Confirm</AlertDialogTitle>
            <AlertDialogDescription>
                Do you want to proceed?
            </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
            <AlertDialogCancel OnClick="HandleCancel">Cancel</AlertDialogCancel>
            <AlertDialogAction OnClick="HandleConfirm">Confirm</AlertDialogAction>
        </AlertDialogFooter>
    </AlertDialogContent>
</AlertDialog>