Dialog

Composable modal built on the native <dialog> element.

Confirm Action

This is a native HTML5 dialog element with minimal styling and behavior.

Controlled

This dialog is opened by setting open={true} on Dialog.Content. ESC, backdrop click, or the close button fire the native close event, which onClose uses to flip state back to false.

Usage

import {Dialog, DialogClose, DialogContent, DialogTrigger} from 'kinu';

<Dialog>
  <DialogTrigger><Button>Open</Button></DialogTrigger>
  <DialogContent>Modal body</DialogContent>
  <DialogClose><Button>Close</Button></DialogClose>
</Dialog>

Exports

Name Description Rendered HTML
Dialog Modal overlay —
DialogTrigger Dialog trigger —
DialogContent Dialog content —
DialogClose Close button —

Props

DialogProps

Prop Type Default Description
id string — Optional ID for the dialog. If not provided, one will be auto-generated.

DialogContentProps

Prop Type Default Description
id string — Override the auto-generated dialog ID.

Static Shortcuts

  • Dialog.Trigger = DialogTrigger
  • Dialog.Content = DialogContent
  • Dialog.Close = DialogClose

Notes

  • Relies on command attributes instead of portal gymnastics.
  • Dialog.Content forwards all native <dialog> props.
  • For controlled state, pass open to Dialog.Content and wire onClose — the native open attribute is promoted to a modal by a small internal hook, and the browser's close event drives the state-sync callback.

_Source: src/components/dialog/index.tsx