The Blazor Dialog component is a pop-up window that appears in front of app content to show important information, collecting user input, showing forms, or presenting detailed content.

A modal Dialog prevents users from interacting with the rest of the application until the Dialog is closed. The IsModal property enables modal behavior by displaying an overlay behind the Dialog, ensuring users must complete their interaction with the Dialog before accessing other application content.

The Dialog component allows for complete customization of its appearance through templates. You can define custom layouts for the Header, Content, and Footer areas within the DialogTemplates component, giving you full control over the UI and UX of the pop-up.

The Blazor Dialog can be positioned using the DialogPositionData property by providing the X and Y coordinates. It can be positioned inside the target of the container or body of the element based on the given X and Y values.

The resizable Dialog can be created by setting the EnableResize property to true, which is used to change the size of a Dialog dynamically and view its content with expanded mode. When enabled, users can interact with the dialog’s resize handles to modify its dimensions according to their needs. The ResizeHandles property configures the specific directions in which the Dialog can be resized. Resize handles are interactive grip areas positioned on the dialog’s edges and corners that users can drag to modify the Dialog dimensions.

To enable dragging capabilities, set the AllowDragging property to true on the Dialog component. When enabled, users can drag the Dialog by clicking and holding the Dialog header area.

The Blazor Dialog component supports rendering one or more action buttons in its footer using the DialogButtons Tag element. Inside this element, each button is defined using the DialogButton Tag

You can show the Dialog in full screen by passing true as argument to the Dialog ShowAsync method. By using the Visible property, you can prevent the Dialog from showing initially.

The SfDialogService enables Predefined dialogs (Alert, Confirm, Prompt) that can be invoked from code without declaring Dialog components in each page. To use these features in a real project you must register Syncfusion services and add the Dialog provider at app root.

Register And Dialog Service

Add the Syncfusion services and register SfDialogService in Program.cs (or your startup file):

builder.Services.AddScoped<SfDialogService/>();

Add The Dialog Provider

Place the Dialog provider near the root of the app (for example in App.razor or your main layout) so Predefined dialogs can render correctly:

<SfDialogProvider/>

With these steps completed you can call DialogService.AlertAsync, DialogService.ConfirmAsync, and DialogService.PromptAsync from pages, components or services and capture results via the returned Task.