## Modal
A focused, blocking dialog in two types — a Confirmation (yes/no decision) and an Action (a task surface) — rendered through the shared Modal.
Tier: composite-antd. Frameworks: HTML (paste-and-run, no build step) · React · Vue 3.
Default to the HTML snippet — a CDN-React runnable page (React + antd loaded from a CDN, no build step) — React/Vue use the same shared-themed DataTable via your bundler.
Surfaces: editor, dashboard, settings.
Props:
- open: boolean, default false. Controls visibility
- title: string, default —. Dialog heading
- onOk: () => void, default —. Confirm handler
- onCancel: () => void, default —. Dismiss handler
- confirmLoading: boolean, default false. Spinner on the confirm button
- width: string, default modalWidth('simple'). Dialog width — pass modalWidth(size): min(target px, calc(100vw − 32px)) so it's the px width on desktop and near-full-width on mobile. Targets: simple 504 / complexity 720 / rich 1280
- styles: object, default modalStyles('simple'). Height cap + body scroll for the size — modalStyles(size)
- footer: ReactNode, default —. DS footer: Learn-more link (left, a --aha-text-link anchor — external-link glyph only when it leaves AhaSlides) + Cancel + Apply (right)
- centered: boolean, default false. Vertically centre the dialog in the viewport
- closable: boolean, default true. Show the top-right close (X)
- mask: boolean, default true. Render the dimming overlay behind the dialog
Tokens: colorPrimary, borderRadius, Modal.contentBg, Modal.headerBg, Modal.titleColor, Modal.titleFontSize.
Use when: Modal (the user must confirm or complete a focused task before continuing); Drawer (a longer edit form or detail panel that keeps page context); Popconfirm (a lightweight yes/no on a single control).