Components

Dialog

Dialog — a modal panel that overlays the page to focus the user on a single task or decision (confirm a checkout, complete a short form) and blocks the rest of the UI until it is resolved. Use it when the interaction must interrupt the current flow; for non-blocking status, prefer an inline Alert or a Toast. It traps focus inside the panel, restores focus to the trigger on close, and dismisses on escape or a backdrop click, so keyboard and screen-reader users are handled correctly. Keep dialogs short — a title, one line of context, and a clear primary action.