Modal

Opinionated one-prop dialog for reversible flows — forms, invites, informational panels.

Modal is the common case of Dialog with zero composition: open + onOpenChange + title/description/footer slots and a width preset. It's for reversible flows — anything where dismissing by accident costs nothing. For destructive confirmations, use AlertDialog/ConfirmDialog instead (see the comparison below).

Installation

import { Modal } from "@iammikz/srui";

Usage

An invite flow — body content, a guarded primary action, and dismissal that can't lose anything:

Informational (`size="sm"`)

One fact, one way out:

Props

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Close requests (Escape, overlay, ×)
`title`	`ReactNode`	—	Heading (required for a11y)
`description`	`ReactNode`	—	Muted subheading
`children`	`ReactNode`	—	Body
`footer`	`ReactNode`	—	Right-aligned action row
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Width preset
`showCloseButton`	`boolean`	`true`	Hide the corner ×

Modal vs AlertDialog

They look alike; the contract differs. Pick by what an accidental dismissal would cost.

	`Modal` (this)	`AlertDialog` / `ConfirmDialog`
Dismissal	Escape, overlay click, corner × — all close it	Explicit Action or Cancel only; overlay and Escape are ignored
Role	`dialog`	`alertdialog` (announced assertively)
Built for	Reversible flows: forms, invites, editors, info	Irreversible actions: delete, publish, charge
Footer	Anything you pass	Action + Cancel; Action can be `destructive`
Losing input	Acceptable — nothing destructive happened	Must be impossible to click away from

Rule of thumb: if the primary button says Delete, Remove, or Publish, reach for AlertDialog. Everything else is a Modal. Need trigger composition or custom layout? Start from Dialog.

Accessibility

Everything Dialog provides: labelled dialog, focus trap, Escape and overlay dismissal with focus restoration.