Modal: Blazor modal component

Examples

Bind Open

@bind-Open shows the modal; Escape, the backdrop or your own button sets it back to false.

website/Examples/Feedback/ModalBindOpenExample.razor Source

Confirmation

AlertDialog sets role="alertdialog". With BackdropClick and CloseOnEscapeKey off, only the buttons close it.

Workspace active

website/Examples/Feedback/ModalConfirmExample.razor Source

Close button and OnClose

CloseButton adds the corner (x), TitleContent takes custom title markup, Class widens the box and OnClose runs each time the modal dismisses itself.

Dismissed 0 time(s)

website/Examples/Feedback/ModalCloseButtonExample.razor Source

API

DaisyBlazor

Parameters

AlertDialog bool
= false
Render with role="alertdialog" for confirmations.
BackdropClick bool
= true
Allow dismissing by clicking the backdrop.
BodyClass string
= null
CSS classes of the body wrapper, replacing the default py-2 text-base-content. In a flex flex-col box, use contents to lay the body out as if unwrapped, or min-h-0 flex-1 overflow-y-auto for a scrolling body between a fixed header and footer.
CloseButton bool
= false
Show a close (x) button in the corner.
CloseLabel string
= null
Accessible label of the close button and backdrop. Null uses the app-wide Strings.
CloseOnEscapeKey bool
= true
Allow dismissing with the Escape key.
Open bool
= false
Whether the modal is shown. Use @bind-Open (MudDialog's @bind-Visible).
Title string
= null
Title text; labels the dialog through aria-labelledby.
Class string
= null
Extra CSS classes on the .modal-box (e.g. max-w-4xl).
Style string
= null
Inline CSS style on the .modal-box.

Name	Type	Default	Description
AlertDialog	bool	false	Render with role="alertdialog" for confirmations.
BackdropClick	bool	true	Allow dismissing by clicking the backdrop.
BodyClass	string	null	CSS classes of the body wrapper, replacing the default py-2 text-base-content. In a flex flex-col box, use contents to lay the body out as if unwrapped, or min-h-0 flex-1 overflow-y-auto for a scrolling body between a fixed header and footer.
CloseButton	bool	false	Show a close (x) button in the corner.
CloseLabel	string	null	Accessible label of the close button and backdrop. Null uses the app-wide Strings.
CloseOnEscapeKey	bool	true	Allow dismissing with the Escape key.
Open	bool	false	Whether the modal is shown. Use @bind-Open (MudDialog's @bind-Visible).
Title	string	null	Title text; labels the dialog through aria-labelledby.
Class	string	null	Extra CSS classes on the .modal-box (e.g. max-w-4xl).
Style	string	null	Inline CSS style on the .modal-box.

Events

OnClose EventCallback
Raised after the modal closes itself (Escape, backdrop, close button).
OpenChanged EventCallback<bool>
Raised with false when the modal closes itself (Escape, backdrop, close button).

Name	Type	Description
OnClose	EventCallback	Raised after the modal closes itself (Escape, backdrop, close button).
OpenChanged	EventCallback<bool>	Raised with false when the modal closes itself (Escape, backdrop, close button).

Content

ChildContent RenderFragment
Body content, rendered after DialogContent.
DialogActions RenderFragment
Footer actions, as on Dialog.
DialogContent RenderFragment
Body content (MudDialog name), rendered before ChildContent.
TitleContent RenderFragment
Custom title markup; takes precedence over Title.

Name	Type	Description
ChildContent	RenderFragment	Body content, rendered after DialogContent.
DialogActions	RenderFragment	Footer actions, as on Dialog.
DialogContent	RenderFragment	Body content (MudDialog name), rendered before ChildContent.
TitleContent	RenderFragment	Custom title markup; takes precedence over Title.

From MudDialog (inline)

Modal keeps MudDialog (inline)'s parameter names, so most markup moves over by dropping the Mud prefix. See the migration guide for the shared enums, icons and services.

An inline <MudDialog @bind-Visible> becomes <Modal @bind-Open> and keeps TitleContent, DialogContent and DialogActions. CloseButton, CloseOnEscapeKey and BackdropClick are plain parameters instead of DialogOptions.

Modal

Invite a team member