Modal

A dialog overlay that focuses attention on a single task or piece of information.

Installation

tsx

import { Modal } from "madagent";

Default

Sizes

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Confirmation Preset

Usage

tsx

<Modal open={true} onClose={() => {}} title="تأكيد">
  <p>هل أنت متأكد من رغبتك في المتابعة مع هذا الإجراء؟</p>
</Modal>

Prop	Type	Default	Description
`open*`	`boolean`	-	Whether the modal is visible
`onClose*`	`() => void`	-	Callback when the modal is dismissed
`title`	`ReactNode`	-	Title displayed in the modal header
`size`	`"sm""md""lg"`	`"md"`	Modal size
`closable`	`boolean`	`true`	Whether the modal can be closed by the user
`initialFocusRef`	`RefObject<HTMLElement \| null>`	-	Optional preferred initial focus target inside the dialog; used by safe-default compositions such as ConfirmDialog
`actions`	`ReactNode`	-	Footer actions area
`children*`	`ReactNode`	-	Modal body content

Confirmation Preset

ConfirmDialog is a thin preset built on top of Modal — a role="alertdialog", safe-default focus on Cancel, optional destructive styling, and automatic pending-state handling for a Promise-returning onConfirm. It stays a separate export (import { ConfirmDialog }from "madagent") rather than a Modal prop, but its docs live here rather than on their own page.

Normal

The safe Cancel action receives initial focus. Confirm runs the supplied callback.

tsx

<ConfirmDialog
  open={open}
  onCancel={() => setOpen(false)}
  onConfirm={handleConfirm}
  title="Confirm action?"
  description="Review your choice before continuing."
/>

Destructive

Use destructive for irreversible actions. The confirm button uses the danger treatment while Cancel remains the safe initial focus.

tsx

<ConfirmDialog
  open={open}
  onCancel={close}
  onConfirm={deleteInvoice}
  title="Delete invoice?"
  description="This action cannot be undone."
  confirmLabel="Delete"
  destructive
/>

Async Pending

Return a Promise from onConfirm to enable automatic loading and double-submit protection.

tsx

<ConfirmDialog
  open={open}
  onCancel={close}
  onConfirm={async () => {
    await saveChanges();
    close();
  }}
  title="Save changes?"
/>

ConfirmDialog Props

Prop	Type	Default	Description
`open`	`boolean`	-	Controls whether the dialog is open
`onCancel`	`() => void`	-	Called by Cancel, Escape, or an overlay click
`onConfirm`	`() => voidPromise<void>`	-	Runs the confirmation. Returned Promises enable automatic loading protection
`title`	`ReactNode`	-	Required alertdialog heading
`description`	`ReactNode`	-	Optional accessible description
`confirmLabel`	`ReactNode`	`"Confirm"`	Confirm action content
`cancelLabel`	`ReactNode`	`"Cancel"`	Cancel action content
`destructive`	`boolean`	`false`	Uses the danger Button treatment for confirmation
`loading`	`boolean`	`false`	Externally controls the pending state

RTL Support

Components automatically adapt to right-to-left languages using CSS logical properties.

Preview

Confirmation Preset

Usage

tsx

<Modal open={true} onClose={() => {}} title="تأكيد">
  <p>هل أنت متأكد من رغبتك في المتابعة مع هذا الإجراء؟</p>
</Modal>

Prop

Type

Default

Description

open*

boolean

Whether the modal is visible

onClose*

() => void

Callback when the modal is dismissed

title

ReactNode

Title displayed in the modal header

size

"sm""md""lg"

"md"

Modal size

closable

boolean

true

Whether the modal can be closed by the user

initialFocusRef

RefObject<HTMLElement | null>

Optional preferred initial focus target inside the dialog; used by safe-default compositions such as ConfirmDialog

actions

ReactNode

Footer actions area

children*

ReactNode

Modal body content

Confirmation Preset

ConfirmDialog Props

Prop	Type	Default	Description
`open`	`boolean`	-	Controls whether the dialog is open
`onCancel`	`() => void`	-	Called by Cancel, Escape, or an overlay click
`onConfirm`	`() => voidPromise<void>`	-	Runs the confirmation. Returned Promises enable automatic loading protection
`title`	`ReactNode`	-	Required alertdialog heading
`description`	`ReactNode`	-	Optional accessible description
`confirmLabel`	`ReactNode`	`"Confirm"`	Confirm action content
`cancelLabel`	`ReactNode`	`"Cancel"`	Cancel action content
`destructive`	`boolean`	`false`	Uses the danger Button treatment for confirmation
`loading`	`boolean`	`false`	Externally controls the pending state