Dialog

Dialog

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 open state programmatically using bind-Open two-way binding.

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 showcasing complex forms, validation, dynamic calculations, and nested dialogs.

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

API Reference

Component parameters and their types.

Prop	Type	Default	Description
Open	bool	false	Controls the open state of the dialog. Use @bind-Open for two-way binding.
OpenChanged	EventCallback<bool>	—	Fired when the open state changes. Paired with Open for two-way binding.
ShowClose	bool	true	On DialogContent: when false, hides the default X close button in the top-right corner.
Class	string?	null	Additional CSS classes. Use max-w-* on DialogContent to customize width.
Variant	DialogContentVariant	Default	On DialogContent: style variant. Use Form for scrollable form layouts.
AsChild	bool	false	On DialogTrigger/DialogClose: merges dialog behavior onto the child element.
ChildContent	RenderFragment?	null	Content slot for trigger, content, header, footer sub-components.
Class (Footer)	string?	null	On DialogFooter: additional CSS classes. Useful for spacing adjustments like mt-4.

Previous Date Range Picker Next Dialog Service