Surfacesduskmoonimplemented11 demos

Modal

Modal blocks for confirmation, focused forms, and critical decisions.

Import@duskmoon-dev/components/modal

4API sections

34documented props

9behavior scenarios

Key API

opendefaultOpentitlecontentfooteronOk

Usage

When to use

Use it immediately after user actions or system checks that need visible confirmation.
Choose the least interruptive feedback surface that still makes the state clear.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

User feedback

Covers transient, inline, or blocking feedback patterns for user actions and system status.

Action recovery

Shows how the component keeps next actions visible after success, warning, or failure states.

Primary API surface

Modal is most often configured through `open`, `defaultOpen`, `title`, `content`.

Covered behavior

Renders open modal with title and children

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Basic usage

authored

Import the component stylesheet and Modal from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function Example() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Renders open modal with title and children

test-backed

Modal scenario from the component test coverage: renders open modal with title and children.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalRendersOpenModalWithDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Supports uncontrolled defaultOpen and close button

test-backed

Modal scenario from the component test coverage: supports uncontrolled defaultopen and close button.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalSupportsUncontrolledDefaultOpenAndDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Calls ok and cancel callbacks from default footer

test-backed

Modal scenario from the component test coverage: calls ok and cancel callbacks from default footer.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalCallsOkAndCancelDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Supports content, custom footer, width, centered, and custom classes

test-backed

Modal scenario from the component test coverage: supports content, custom footer, width, centered, and custom classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalSupportsContentCustomFooterDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Honors maskClosable and closable flags

test-backed

Modal scenario from the component test coverage: honors maskclosable and closable flags.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalHonorsMaskClosableAndClosableDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Supports destroyOnClose and afterOpenChange

test-backed

Modal scenario from the component test coverage: supports destroyonclose and afteropenchange.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalSupportsDestroyOnCloseAndAfterOpenChangeDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Applies confirmLoading to ok button

test-backed

Modal scenario from the component test coverage: applies confirmloading to ok button.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalAppliesConfirmLoadingToOkDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Forwards dialog ref and native props

test-backed

Modal scenario from the component test coverage: forwards dialog ref and native props.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalForwardsDialogRefAndDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Provides static service placeholders

test-backed

Modal scenario from the component test coverage: provides static service placeholders.

Source

import "@duskmoon-dev/components/styles.css";
import { Modal } from "@duskmoon-dev/components/modal";

export function ModalProvidesStaticServicePlaceholdersDemo() {
  return (<Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>);
}

Preview

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>
</div>

<div data-theme="moonlight">
  <Modal
  open
  title="Release checklist"
  width={420}
  onOk={() => console.log("ok")}
  onCancel={() => console.log("cancel")}
>
  Review component styles before publishing the package.
</Modal>
</div>

API

The API reference below lists every parsed exported type or interface for Modal. Start with `open`, `defaultOpen`, `title`, `content` for common usage.

Types: packages/components/src/components/modal/Modal.types.tsScenarios: packages/components/src/components/modal/Modal.test.tsx

ModalPropsinterface extends Omit< ComponentProps<"div">, "children" | "className" | "content" | "title" >

Prop	Type	Required	Description
`open`	`boolean`	No	open configures Modal.
`defaultOpen`	`boolean`	No	defaultOpen configures Modal.
`title`	`ReactNode`	No	title configures Modal.
`children`	`ReactNode`	No	children configures Modal.
`content`	`ReactNode`	No	content configures Modal.
`footer`	`ReactNode \| null`	No	footer configures Modal.
`onOk`	`(event: MouseEvent<HTMLButtonElement>) => void`	No	onOk configures Modal.
`onCancel`	`(event: MouseEvent<HTMLButtonElement \| HTMLDivElement>) => void`	No	onCancel configures Modal.
`okText`	`ReactNode`	No	okText configures Modal.
`cancelText`	`ReactNode`	No	cancelText configures Modal.
`confirmLoading`	`boolean`	No	confirmLoading configures Modal.
`closable`	`boolean`	No	closable configures Modal.
`maskClosable`	`boolean`	No	maskClosable configures Modal.
`width`	`CSSProperties["width"]`	No	width configures Modal.
`centered`	`boolean`	No	centered configures Modal.
`destroyOnClose`	`boolean`	No	destroyOnClose configures Modal.
`afterOpenChange`	`(open: boolean) => void`	No	afterOpenChange configures Modal.
`className`	`string`	No	className configures Modal.
`maskClassName`	`string`	No	maskClassName configures Modal.
`closeIcon`	`ReactNode`	No	closeIcon configures Modal.

ModalFuncPropsinterface

Prop	Type	Required	Description
`title`	`ReactNode`	No	title configures Modal.
`content`	`ReactNode`	No	content configures Modal.
`onOk`	`() => void`	No	onOk configures Modal.
`onCancel`	`() => void`	No	onCancel configures Modal.
`okText`	`ReactNode`	No	okText configures Modal.
`cancelText`	`ReactNode`	No	cancelText configures Modal.

ModalFuncHandleinterface

Prop	Type	Required	Description
`destroy`	`() => void`	Yes	destroy configures Modal.
`update`	`(config: ModalFuncProps) => void`	Yes	update configures Modal.

ModalComponentinterface extends ForwardRefExoticComponent< ModalProps & RefAttributes<HTMLDivElement> >

Prop	Type	Required	Description
`confirm`	`(config: ModalFuncProps) => ModalFuncHandle`	Yes	confirm configures Modal.
`info`	`(config: ModalFuncProps) => ModalFuncHandle`	Yes	info configures Modal.
`success`	`(config: ModalFuncProps) => ModalFuncHandle`	Yes	success configures Modal.
`error`	`(config: ModalFuncProps) => ModalFuncHandle`	Yes	error configures Modal.
`warning`	`(config: ModalFuncProps) => ModalFuncHandle`	Yes	warning configures Modal.
`destroyAll`	`() => void`	Yes	destroyAll configures Modal.