Modal
Native modal dialog with composable Header, Title, Description, Body, Footer and Close. Body scrolls inside the viewport while Header/Footer stay visible. All technical portals, focus handling and action-group wrappers are internal. Provide Title or aria-label.
Использование
Размеры
Статусы
API
| Проп | Тип | По умолчанию | Описание |
|---|---|---|---|
trigger | ReactElement<any, string | JSXElementConstructor<any>> | — | One interactive element forwarding native props/ref. |
open | boolean | — | — |
defaultOpen | boolean | | — |
onOpenChange | (open: boolean) => void | — | — |
onOpen | () => void | — | Called after an actual transition to open/closed, not a rejected controlled request. |
onClose | () => void | — | — |
size | "base" | "large" | base | 560px / 720px; shrinks to viewport minus 32px. |
status | "info" | "success" | "warning" | "error" | info | Info has no icon; status does not change the dialog's ARIA role. |
closeOnEscape | boolean | | — |
closeOnOutsidePress | boolean | | — |
initialFocusRef | RefObject<HTMLElement | null> | — | Default focus is the dialog title (or dialog when title is absent). |
finalFocusRef | RefObject<HTMLElement | null> | — | Defaults to the element focused before opening. |
Last updated on