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


childrenReactNodeThe content to render
isOpenBooleanWhether it is open or not
canDismissBooleanWhether the it can be dismissed
onDismissFunctionA function to be called when it is dismissed
refToFocusOnOpenrefToFocusOnOpenA reference to an element to focus on when it closes


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.