Dialog
A modal dialog that interrupts the user with important content and expects a response.
Default
A basic
Dialog with a DialogTrigger button that opens the modal. Includes a DialogHeader with title and description, and a DialogFooter with action buttons.With Form
A
Dialog containing a rich form layout with Input, DatePicker, Select, MultiSelect, Combobox, and RichTextEditor fields. Set TrapFocus="false" on DialogContent when using overlay components like DatePicker, Select, or Combobox inside a dialog, so their popovers can open correctly.Controlled
Use
@bind-Open to programmatically control the dialog state. Set Open to true to open the dialog and false to close it, without needing a DialogTrigger.Alert Style
A destructive action confirmation dialog using
ButtonVariant.Destructive for the trigger. Wrap the cancel button in DialogClose to automatically close the dialog on click.AsChild Pattern
Set
AsChild to true on DialogTrigger or DialogClose to pass trigger or close behavior to a child component instead of rendering an extra wrapper button element.Scrollable Content
For dialogs with long content, wrap the body in a
div with max-h-[300px] overflow-y-auto to make it scrollable. The header and footer remain fixed while the content scrolls.Custom Width
Use the
class attribute on DialogContent to override the default width. For example, sm:max-w-sm for a narrow dialog or sm:max-w-[600px] for a wider one.No Close Button
Set
ShowClose="false" on DialogContent to hide the default X close button. This forces the user to interact with the action buttons, useful for required confirmations.Non-modal
Set
Modal="false" on Dialog to prevent outside-click and Escape dismissal. This legacy parameter does not disable focus trapping; provide an explicit close action.Nested Dialogs
Open a second dialog from within the first by using controlled state with separate
bool fields. A common pattern for "are you sure?" confirmations inside edit dialogs.Custom Escape Handling
Set
CloseOnEscape="false" and handle the OnEscapeKeyDown callback to intercept the Escape key. This lets you show a discard confirmation instead of immediately closing the dialog.AsChild Triggers
The trigger and close components default to AsChild="true". Put a BbButton inside, or use AsChild="false" for plain text, HTML, or an icon. In Development, an unconsumed trigger context logs a warning explaining why the trigger cannot respond and which attributes were ignored.
Custom triggers can use AsChildDiagnostics.WarnIfUnconsumed<TTrigger> with an AsChildTriggerDescription from BlazorBlueprint.Primitives.Utilities. Call it on the first OnAfterRender with the context the trigger cascaded.