Component · C-031

Dialog

A modal dialog for confirming or editing without leaving the page. It traps focus, closes with Escape and returns focus to the trigger.

Install

Install koten-theme first when the project has no Koten tokens yet.

npx shadcn@latest add https://koten.codehive.com.co/r/dialog.json

Requirements

Portaled popup: The popup mounts inside BaseDialog.Portal, outside the document flow. Do not nest it in containers with overflow or in layers with their own z-index.

Accessibility

The name comes from title and the context from description; in practice both are required.
Focus stays trapped in the popup; Escape, the close button and the backdrop close it.
On close, focus returns to the element that opened the dialog.
While open, the rest of the page is removed from the keyboard order.

Read the whole page