Dialog

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

Basic Usage

Example

Custom Footer

You can customize the footer actions.

Example

Fullscreen

Dialog can cover the entire screen.

Example

Draggable & Resizable

Dialog can be dragged by the header and resized.

Example

Theming

Global Customization (BrConfigProvider)

You can override default CSS variables via the theme prop of BrConfigProvider.

Example

API

BrDialog

Name	Type	Default	Description
open	boolean	undefined	The controlled open state of the dialog.
defaultOpen	boolean	undefined	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
modal	boolean	true	The modality of the dialog. When set to true, interaction with outside elements will be disabled (including scroll lock). Set to false if you want to keep the page scrollable.

BrDialogContent

Name	Type	Default	Description
class	string	undefined	Additional classes to apply to the content.
showClose	boolean	true	Whether to show the close button.
fullscreen	boolean	false	Whether to render in fullscreen mode.
draggable	boolean	false	Whether the dialog is draggable (drag handle is the header).
resizable	boolean	false	Whether the dialog is resizable.

BrDialogTrigger

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

BrDialogTitle

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.

BrDialogDescription

Name	Type	Default	Description
asChild	boolean	false	Change the default rendered element for the one passed as a child, merging their props and behavior.