Dialog Modal window that prompts the user to take an action or provides important information.

For best accessibility:
Please use the dialog tag. It automatically comes with FREE accessibility features that are built into the browser and operating system like keyboard controls, focus trap with access to browser controls (react focus trap does NOT support this and is NOT accessible), unlimited dialog nesting/stacking, optional click outside to close, etc.

To prevent esc ⎋ or click-outside-to-close you can use closedby="none|closerequest".

CSS Source

Controls

Title Title should be as simple as possible and should NEVER exceed 1 line.

Body Should be as simple and easy to parse as possible.

Bordered Add separators between the header and the footer/actions blocks.

With actions Show the actions block/section

Properties Jump to heading

Class / Token	Type
`.prs-dialog`	Component	Container
`.prs-dialog-bordered`	Modifier	Divide the header, body, and actions
`.prs-dialog-box`	Part	Houses header, body, action
`.prs-dialog-header`	Part	Houses title and close gadget
`.prs-dialog-body`	Part	Main content
`.prs-dialog-action`	Part	Optional actions
`.prs-dialog-backdrop`	Part	Optional click-to-close