Dialog

A real <dialog>, opened with showModal(). That single call gets a native top-layer stacking context, a native focus trap, native Escape-to-close, and a native ::backdrop.

import { useState } from "react";
import { Button, Dialog } from "@kernelui/react";

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>Delete account</Button>
<Dialog
  open={open}
  onOpenChange={setOpen}
  title="Delete account"
  description="This can't be undone."
>
  <Button variant="danger" onClick={() => setOpen(false)}>
    Confirm
  </Button>
</Dialog>

Props

Accessibility

• Focus moves into the dialog on open and returns to the trigger on close, both native to showModal().
• Escape closes it, also native, no keydown listener written for it.
• title is linked via aria-labelledby automatically.