Dialog

Dialog — окно подтверждения действия: заголовок, текст и две кнопки. Содержимое задаётся пропсами (title, description, cancelText, confirmText) — своего children-контента у окна нет, для произвольного наполнения берётся Panel в модалке хоста. Обе кнопки закрывают окно сами: onCancel срабатывает по отмене, onConfirm — по подтверждению. Кнопка подтверждения по умолчанию danger (типичный сценарий — удаление), для неразрушающих действий вариант меняется confirmVariant. Открывается двумя способами: неконтролируемо — DialogTrigger внутри children (окно живёт рядом со своей кнопкой), либо контролируемо — парой open / onOpenChange, когда открытием распоряжается хост. Окно порталится в body, монтируется лениво при открытии и размонтируется при закрытии, роль — alertdialog (Esc и клик по фону закрывают, фокус заперт внутри). В IDE поверх него построена модалка подтверждения confirmModal — прямо Dialog там не используют.

Использует: Button, Panel

Анатомия

Dialog

Children

DialogTrigger (value)

Portal

Backdrop

Positioner → Content

Panel.Header → Title (title)

Panel.Content → Description (description)

Footer (cancelText | confirmText)

Примеры

Один диалог на список

В списке не нужен диалог на строку: один Dialog обслуживает все строки, а какая из них нажата — говорит value триггера. Оно приходит в onTriggerValueChange (по нему подставляются title и description) и в onConfirm.

Планы на квартал

Баги

Идеи

Контролируемое открытие

Без DialogTrigger открытием управляет хост: open + onOpenChange, children — null. Так диалог зовут из команды или пункта меню, где кнопки-триггера нет. onOpenChange срабатывает на любое закрытие — включая Esc и клик по фону.

Вариант кнопки подтверждения

confirmVariant — тот же набор вариантов, что у Button. Значение по умолчанию danger рассчитано на удаление; подтверждение обычного действия ставит primary, чтобы окно не выглядело предупреждением.

API

Prop	Type	Default
`title`* Заголовок диалога — одна строка, обрезается с многоточием	`string`	-
`description`* Описание — текст подтверждения	`string`	-
`cancelText`* Текст кнопки отмены	`string`	-
`confirmText`* Текст кнопки подтверждения	`string`	-
`confirmVariant` Вариант кнопки подтверждения	`Variant`	`"danger"`
`onCancel` Вызывается по кнопке отмены (Esc и клик по фону сюда не приходят — их ловит onOpenChange)	`() => void`	-
`onConfirm`* Вызывается по кнопке подтверждения. `value` — значение триггера, открывшего диалог (id элемента списка)	`(value: string \| null) => void`	-
`onTriggerValueChange` Вызывается при срабатывании триггера — владелец списка узнаёт активный элемент и может подставить его данные в title/description	`(value: string \| null) => void`	-
`open` Контролируемое состояние — чтобы открывать диалог программно (без пропсов диалог остаётся неконтролируемым, через DialogTrigger)	`boolean`	-
`onOpenChange` Вызывается на любое изменение состояния — включая закрытие по Esc, клику по фону и по обеим кнопкам	`(open: boolean) => void`	-
`children`* Контент, внутри которого размещаются DialogTrigger (список и т.п.)	`ReactNode`	-