Dialog

Interactive

See Dialog in Storybook for every variant, with live controls.

A modal. Use it for a decision that must be made before continuing — most often a destructive confirmation.

import { Dialog } from "@kairosis/eidos";

<Dialog open={open} onClose={() => setOpen(false)} danger title="Delete run">
  This permanently removes the run and its logs. This cannot be undone.
</Dialog>;

Props

Prop	Type	Default	Description
open	boolean	—	Required. Renders nothing when false
onClose	() => void	—	Escape, scrim click, and the close button
title	ReactNode	—
children	ReactNode	—	Body
footer	ReactNode	Cancel + Confirm	Pass null for no footer
width	number	440	px
danger	boolean	false	Red title and Confirm button

Focus

Focus moves into the dialog on open, is trapped while it's open (Tab and Shift+Tab cycle within it, never reaching the page behind the scrim), and returns to whatever opened it on close.

Guidelines

• footer is three-way: omit it for the default Cancel/Confirm pair, pass nodes to replace them, or pass null for no footer at all.
• The default footer's buttons only call onClose — wire up your own footer when Confirm needs to do something.
• Escape closes, and so does a press that starts on the scrim. A press that starts inside and drags out does not.
• Name the action in the title and button ("Delete run"), not "Are you sure?".