ModalDialog

Ready-made dialog content layout: an icon + title header, body text, and a footer action row, wrapped in a DialogPanel.

When to use

Use ModalDialog as the content of a Modal / openModal (@uxf/ui/modal) when you need the standard alert / confirmation dialog structure (title, message, action buttons). It is higher-level than DialogPanel (@uxf/ui/dialog), which is only the panel container — ModalDialog fills that panel with the conventional header / body / footer layout.

For just the header row (back / close buttons, actions), see ModalHeader.

This directory has no index.ts, so import the component from its file: @uxf/ui/modal-dialog/modal-dialog.

Usage

import { Button } from "@uxf/ui/button";
import { Icon } from "@uxf/ui/icon";
import { closeModal, openModal } from "@uxf/ui/modal";
import { ModalDialog } from "@uxf/ui/modal-dialog/modal-dialog";

openModal({
    children: (
        <ModalDialog
            footer={
                <>
                    <Button onClick={() => closeModal()} variant="text">
                        Cancel
                    </Button>
                    <Button color="warning" onClick={handleConfirm}>
                        Confirm
                    </Button>
                </>
            }
            icon={<Icon color="warning" name="triangle-exclamation" />}
            title="Warning dialog"
        >
            Are you sure you want to continue?
        </ModalDialog>
    ),
});

ModalDialog renders its own DialogPanel, so pass it directly as the modal children — do not wrap it in another DialogPanel. Set isDialogPanelHidden to render the layout without the panel wrapper when it is already inside one.

Props

ModalDialogProps is not exported; these are the props the component accepts.

Requirements

Import the component stylesheet once in your global CSS:

@import url("@uxf/ui/css/modal-dialog.css");

Also requires the global @uxf/ui token layer, set up once per app — see @uxf/ui setup.

Any Button / Icon passed via footer / icon also need their own stylesheets.