Dialog

An accessible dialog component, useful for helping users make decisions and to display critical information.

Props

PropTypeDescription
childrenReactNodeThe content to render
isOpenBooleanWhether it is open or not
onCloseFunctionA function to be called when it closes
refToFocusOnOpenrefToFocusOnOpenA reference to an element to focus on when it opens

This component supports all common props.

Examples

Alert on dismiss

You can provide a function to get called when the Dialog is dismissed via click outside or escape key.

Focus element

It is possible to focus a specific element inside the dialog after it opens. If not provided, it will focus on the first focusable element.