Dialog Component

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

Simple Dialog

A basic dialog with title, description, and action buttons.

Dialog with Footer

Dialog with action buttons in the footer using DialogFooter component.

Controlled Dialog

Control the dialog state programmatically using @bind-Open.

Custom Width

Customize the dialog width using the Class parameter.

Without Close Button

Hide the default close button using ShowClose="false".

AsChild Pattern

Use AsChild to compose triggers with your own styled Button components instead of inline styles.

Without AsChild

DialogTrigger renders its own button element with inline classes.

With AsChild

Button component receives trigger behavior via TriggerContext.

Code Example:

<Dialog>
    <DialogTrigger AsChild>
        <Button Variant="ButtonVariant.Destructive">
            Delete Account
        </Button>
    </DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Delete Account</DialogTitle>
        </DialogHeader>
        <DialogFooter>
            <DialogClose AsChild>
                <Button Variant="ButtonVariant.Outline">Cancel</Button>
            </DialogClose>
            <Button Variant="ButtonVariant.Destructive">Delete</Button>
        </DialogFooter>
    </DialogContent>
</Dialog>

Combobox in Dialog

Dialog containing a Combobox for selecting items. Tests nested portal behavior.

Advanced Dialog Demos

Real-world examples: These demos showcase complex forms with multiple input components, validation, dynamic calculations, and nested dialogs. Perfect for testing component integration and benchmarking against React.

{
  "Name": null,
  "Username": null,
  "Email": null,
  "PhoneNumber": null,
  "DateOfBirth": null,
  "ThemeColor": "#3b82f6",
  "Bio": null,
  "EmailNotifications": true,
  "MarketingEmails": false
}

{
  "SelectedPlan": "pro",
  "IsAnnual": true,
  "TeamSize": 5,
  "PromoCode": null,
  "AutoRenew": true
}

{
  "Email": null,
  "Role": "member",
  "Department": null,
  "AssignedProjects": [],
  "AccessExpiresOn": null,
  "SendEmailImmediately": true
}

{
  "ProductName": null,
  "ProductColor": "#3b82f6",
  "Size": "M",
  "Quantity": 1,
  "Rating": 4.5,
  "MinPrice": 50,
  "MaxPrice": 200,
  "CustomOfferPrice": null,
  "SpecialInstructions": null,
  "GiftWrap": false,
  "PriorityShipping": false
}

{
  "Project": {
    "ProjectName": null,
    "Template": "nextjs",
    "Framework": "react"
  },
  "AdvancedSettings": {
    "BuildCommand": "npm run build",
    "Region": "us-east",
    "TimeoutSeconds": 300,
    "MemoryLimitMB": 512,
    "EnableCDN": true,
    "EnableAnalytics": false,
    "EnableAutoDeploy": true,
    "EnvironmentVariables": null
  }
}

Features

Full keyboard navigation support
Focus is automatically trapped within the dialog
Can be controlled or uncontrolled
Manages screen reader announcements with ARIA
Scroll lock on body when dialog is open
Respects prefers-reduced-motion

Installation

Add the following using statement to your _Imports.razor:

@using BlazorUI.Components.Dialog

Usage

<Dialog>
    <DialogTrigger>Open</DialogTrigger>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Are you absolutely sure?</DialogTitle>
            <DialogDescription>
                This action cannot be undone.
            </DialogDescription>
        </DialogHeader>
    </DialogContent>
</Dialog>