Dialog

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

Basic

A simple dialog with title, description, and actions.

<Dialog @bind-Open="dialogOpen">
    <DialogTrigger>
        <Button>Open Dialog</Button>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Are you sure?</DialogTitle>
            <DialogDescription>
                This action cannot be undone.
            </DialogDescription>
        </DialogHeader>
        <DialogFooter>
            <Button Variant="ButtonVariant.Outline">Cancel</Button>
            <Button>Continue</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

Form Dialog

Dialog containing a form for user input. Use DialogBody to wrap the form content.

<Dialog @bind-Open="formOpen">
    <DialogTrigger>
        <Button Variant="ButtonVariant.Outline">Edit Profile</Button>
    </DialogTrigger>
    <DialogContent Class="max-w-[425px]">
        <DialogHeader>
            <DialogTitle>Edit profile</DialogTitle>
            <DialogDescription>
                Make changes to your profile here.
            </DialogDescription>
        </DialogHeader>
        <DialogBody>
            <div class="grid gap-4 py-4">
                <div class="grid grid-cols-4 items-center gap-4">
                    <Label Class="text-right">Name</Label>
                    <Input Class="col-span-3" />
                </div>
            </div>
        </DialogBody>
        <DialogFooter>
            <Button>Save changes</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

Scrollable Content

Use DialogBody to create a scrollable area for long content.

<Dialog @bind-Open="scrollableOpen">
    <DialogTrigger>
        <Button Variant="ButtonVariant.Outline">Scrollable</Button>
    </DialogTrigger>
    <DialogContent Class="max-w-md">
        <DialogHeader>
            <DialogTitle>Terms of Service</DialogTitle>
            <DialogDescription>Please read the following terms.</DialogDescription>
        </DialogHeader>
        <DialogBody>
            @for (int i = 0; i < 20; i++)
            {
                <p class="mb-4 text-sm">
                    This is a paragraph of text that is repeated...
                </p>
            }
        </DialogBody>
        <DialogFooter>
            <Button>Accept</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

Sizes

Use the Size parameter to control the dialog width. Default is DialogSize.Default (max-w-lg).

@* Small *@
<DialogContent Size="DialogSize.Sm">...</DialogContent>

@* Default (max-w-lg) *@
<DialogContent Size="DialogSize.Default">...</DialogContent>

@* Extra Large *@
<DialogContent Size="DialogSize.Xl">...</DialogContent>

@* 3XL *@
<DialogContent Size="DialogSize.Max3xl">...</DialogContent>

@* Fullscreen *@
<DialogContent Size="DialogSize.Full">...</DialogContent>

@* Available sizes: Sm, Md, Lg, Xl, Max2xl, Max3xl, Max4xl, Max5xl, Max6xl, Max7xl, Full *@