GitHub New

Alert Dialog

Previous Next

A modal dialog that interrupts the user with important content and expects a response. 

<AlertDialog>
    <AlertDialogTrigger>
        <Button Variant="@Button.ButtonVariant.Outline" @onclick="() => _showDialog = true">Show Dialog</Button>
    </AlertDialogTrigger>

    @if (_showDialog)
    {
        <AlertDialogContent OnCancel="() => _showDialog = false">
            <AlertDialogHeader>
                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                <AlertDialogDescription>
                    This action cannot be undone. This will permanently delete your account from our servers.
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel @onclick="() => _showDialog = false">Cancel</AlertDialogCancel>
                <AlertDialogAction @onclick="() => _showDialog = false">Continue</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    }
</AlertDialog>

@code {
    private bool _showDialog;
}

Installation

Install the alert-dialog component using the command or manual steps.

blazor-shadcn add alert-dialog

Usage

@using ShadcnBlazor.Components.UI
<AlertDialog>
    <AlertDialogTrigger>
        <Button Variant="@Button.ButtonVariant.Outline" @onclick="() => _showDialog = true">Show Dialog</Button>
    </AlertDialogTrigger>

    @if (_showDialog)
    {
        <AlertDialogContent OnCancel="() => _showDialog = false">
            <AlertDialogHeader>
                <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
                <AlertDialogDescription>
                    This action cannot be undone. This will permanently delete your account from our servers.
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel @onclick="() => _showDialog = false">Cancel</AlertDialogCancel>
                <AlertDialogAction @onclick="() => _showDialog = false">Continue</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    }
</AlertDialog>

@code {
    private bool _showDialog;
}

Examples

Basic

<AlertDialog>
    <AlertDialogTrigger>
        <Button Variant="@Button.ButtonVariant.Outline" @onclick="() => _showDialog = true">Show Dialog</Button>
    </AlertDialogTrigger>

    @if (_showDialog)
    {
        <AlertDialogContent OnCancel="() => _showDialog = false">
            <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 @onclick="() => _showDialog = false">Cancel</AlertDialogCancel>
                <AlertDialogAction @onclick="() => _showDialog = false">Continue</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    }
</AlertDialog>

@code {
    private bool _showDialog;
}

Small

<AlertDialog>
    <AlertDialogTrigger>
        <Button Variant="@Button.ButtonVariant.Outline" @onclick="() => _showDialog = true">Show Dialog</Button>
    </AlertDialogTrigger>

    @if (_showDialog)
    {
        <AlertDialogContent Size="@AlertDialogContent.AlertDialogContentSize.Sm" OnCancel="() => _showDialog = false">
            <AlertDialogHeader>
                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
                <AlertDialogDescription>
                    Do you want to allow the USB accessory to connect to this device?
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel @onclick="() => _showDialog = false">Don't allow</AlertDialogCancel>
                <AlertDialogAction @onclick="() => _showDialog = false">Allow</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    }
</AlertDialog>

@code {
    private bool _showDialog;
}

Media

<AlertDialog>
    <AlertDialogTrigger>
        <Button Variant="@Button.ButtonVariant.Outline" @onclick="() => _showDialog = true">Share Project</Button>
    </AlertDialogTrigger>

    @if (_showDialog)
    {
        <AlertDialogContent OnCancel="() => _showDialog = false">
            <AlertDialogHeader>
                <AlertDialogMedia>
                    <img src="https://files.svgcdn.io/lucide/circle-fading-plus.svg" alt="" class="size-6" />
                </AlertDialogMedia>
                <AlertDialogTitle>Share this project?</AlertDialogTitle>
                <AlertDialogDescription>
                    Anyone with the link will be able to view and edit this project.
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel @onclick="() => _showDialog = false">Cancel</AlertDialogCancel>
                <AlertDialogAction @onclick="() => _showDialog = false">Share</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    }
</AlertDialog>

@code {
    private bool _showDialog;
}

Small with Media

<AlertDialog>
    <AlertDialogTrigger>
        <Button Variant="@Button.ButtonVariant.Outline" @onclick="() => _showDialog = true">Show Dialog</Button>
    </AlertDialogTrigger>

    @if (_showDialog)
    {
        <AlertDialogContent Size="@AlertDialogContent.AlertDialogContentSize.Sm" OnCancel="() => _showDialog = false">
            <AlertDialogHeader>
                <AlertDialogMedia>
                    <img src="https://files.svgcdn.io/lucide/bluetooth.svg" alt="" class="size-6" />
                </AlertDialogMedia>
                <AlertDialogTitle>Allow accessory to connect?</AlertDialogTitle>
                <AlertDialogDescription>
                    Do you want to allow the USB accessory to connect to this device?
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel @onclick="() => _showDialog = false">Don't allow</AlertDialogCancel>
                <AlertDialogAction @onclick="() => _showDialog = false">Allow</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    }
</AlertDialog>

@code {
    private bool _showDialog;
}

Destructive

<AlertDialog>
    <AlertDialogTrigger>
        <Button Variant="@Button.ButtonVariant.Destructive" @onclick="() => _showDialog = true">Delete Chat</Button>
    </AlertDialogTrigger>

    @if (_showDialog)
    {
        <AlertDialogContent Size="@AlertDialogContent.AlertDialogContentSize.Sm" OnCancel="() => _showDialog = false">
            <AlertDialogHeader>
                <AlertDialogMedia Class="bg-destructive/10 text-destructive dark:bg-destructive/20 dark:text-destructive">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M3 6h18" />
                        <path d="M8 6V4h8v2" />
                        <path d="M19 6l-1 14H6L5 6" />
                        <path d="M10 11v6" />
                        <path d="M14 11v6" />
                    </svg>
                </AlertDialogMedia>
                <AlertDialogTitle>Delete chat?</AlertDialogTitle>
                <AlertDialogDescription>
                    This will permanently delete this chat conversation. View <a href="#">Settings</a> delete any memories saved during this chat.
                </AlertDialogDescription>
            </AlertDialogHeader>
            <AlertDialogFooter>
                <AlertDialogCancel Variant="@Button.ButtonVariant.Outline" @onclick="() => _showDialog = false">Cancel</AlertDialogCancel>
                <AlertDialogAction Variant="@Button.ButtonVariant.Destructive" @onclick="() => _showDialog = false">Delete</AlertDialogAction>
            </AlertDialogFooter>
        </AlertDialogContent>
    }
</AlertDialog>

@code {
    private bool _showDialog;
}

API Reference

AlertDialog

Prop Type Default
Class string? null
ChildContent RenderFragment? null

AlertDialogTrigger

Prop Type Default
Class string? null
ChildContent RenderFragment? null

AlertDialogContent

Prop Type Default
Size Default | Sm Default
OnCancel EventCallback None
Class string? null

AlertDialogHeader

Prop Type Default
Class string? null
ChildContent RenderFragment? null

AlertDialogFooter

Prop Type Default
Class string? null
ChildContent RenderFragment? null

AlertDialogTitle

Prop Type Default
Class string? null
ChildContent RenderFragment? null

AlertDialogDescription

Prop Type Default
Class string? null
ChildContent RenderFragment? null

AlertDialogMedia

Prop Type Default
Class string? null
ChildContent RenderFragment? null

AlertDialogAction

Prop Type Default
Variant ButtonVariant Default
Size ButtonSize Default
Class string? null
ChildContent RenderFragment? null

AlertDialogCancel

Prop Type Default
Variant ButtonVariant Outline
Size ButtonSize Default
Class string? null
ChildContent RenderFragment? null