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


childrenThe Children prop allows users to pass other components as a property, enabling users to compose together components.
classNameThe className property can be used to add a CSS class to a component that accepts styling. In Clutch, the className property powers the visual styling panel and the class name itself is auto-generated. Additional class names can be passed to the component by twirling open the className control and passing in strings.
tagThe underlying tag to render for Box defaults to a div
refThe ref property allows users to attach React refs to the component. Learn more about refs in React here
styleThe style property accepts a CSS JavaScript object with camelCased properties rather than a CSS string. Using the style attribute as the primary means of styling elements is generally not recommended. The style is most often used in React applications to add dynamically-computed styles at render time. Learn more about the style property here.
triggerThe button that opens the dialog.
titleAn accessible title to be announced when the dialog is opened.
descriptionAn optional accessible description to be announced when the dialog is opened.
contentContains content to be rendered in the open dialog.
defaultOpenThe open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
openThe controlled open state of the dialog. Must be used in conjunction with onOpenChange.
onOpenChangeEvent handler called when the open state of the dialog changes.
modalThe modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.