Standard duskmoon implemented 7 demos

message

message shows transient global feedback after user actions.

Import @duskmoon-dev/components/message

8 API sections

46 documented props

5 behavior scenarios

Key API

topdurationmaxCountprefixClsgetContainerplacement

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

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

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

Theme The 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

message is most often configured through `top`, `duration`, `maxCount`, `prefixCls`.

Covered behavior

Opens and renders typed messages

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 message from its package subpath, then render it with the core props.

Source

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

export function Example() {
  return (<message>DuskMoon Message</message>);
}

Preview

Opens and renders typed messages

test-backed

message scenario from the component test coverage: opens and renders typed messages.

Source

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

export function messageOpensAndRendersTypedDemo() {
  return (<message>DuskMoon Message</message>);
}

Preview

Updates same keyed message and closes by key

test-backed

message scenario from the component test coverage: updates same keyed message and closes by key.

Source

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

export function messageUpdatesSameKeyedMessageDemo() {
  return (<message>DuskMoon Message</message>);
}

Preview

Supports max count and placement config

test-backed

message scenario from the component test coverage: supports max count and placement config.

Source

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

export function messageSupportsMaxCountAndDemo() {
  return (<message>DuskMoon Message</message>);
}

Preview

Supports close button and onClose

test-backed

message scenario from the component test coverage: supports close button and onclose.

Source

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

export function messageSupportsCloseButtonAndDemo() {
  return (<message>DuskMoon Message</message>);
}

Preview

Supports useMessage holder tuple

test-backed

message scenario from the component test coverage: supports usemessage holder tuple.

Source

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

export function messageSupportsUseMessageHolderTupleDemo() {
  return (<message>DuskMoon Message</message>);
}

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">
  <message>DuskMoon Message</message>
</div>

<div data-theme="moonlight">
  <message>DuskMoon Message</message>
</div>

API

The API reference below lists every parsed exported type or interface for message. Start with `top`, `duration`, `maxCount`, `prefixCls` for common usage.

Types: packages/components/src/components/message/Message.types.ts Scenarios: packages/components/src/components/message/Message.test.tsx

MessageConfig interface

Prop	Type	Required	Description
`top`	`number`	No	top configures message.
`duration`	`number`	No	duration configures message.
`maxCount`	`number`	No	maxCount configures message.
`prefixCls`	`string`	No	prefixCls configures message.
`getContainer`	`() => HTMLElement`	No	getContainer configures message.
`placement`	`MessagePlacement`	No	placement configures message.

MessageArgsProps interface

Prop	Type	Required	Description
`key`	`string \| number`	No	key configures message.
`type`	`MessageType`	No	type configures message.
`content`	`ReactNode`	No	content configures message.
`duration`	`number`	No	duration configures message.
`className`	`string`	No	className configures message.
`icon`	`ReactNode`	No	icon configures message.
`onClose`	`() => void`	No	onClose configures message.

MessageInstance interface

Prop	Type	Required	Description
`key`	`string`	Yes	key configures message.
`type`	`MessageType`	Yes	type configures message.
`content`	`ReactNode`	No	content configures message.
`duration`	`number`	Yes	duration configures message.
`className`	`string`	No	className configures message.
`icon`	`ReactNode`	No	icon configures message.
`onClose`	`() => void`	No	onClose configures message.

MessageHandle interface extends Promise<void>

Prop	Type	Required	Description
`key`	`string`	Yes	key configures message.
`close`	`() => void`	Yes	close configures message.

MessageApi interface

Prop	Type	Required	Description
`open`	`(config: MessageArgsProps) => MessageHandle`	Yes	open configures message.
`success`	`(`	Yes	success configures message.
`content`	`MessageContent,`	Yes	content configures message.
`duration`	`number,`	No	duration configures message.
`onClose`	`() => void,`	No	onClose configures message.
`error`	`(`	Yes	error configures message.
`content`	`MessageContent,`	Yes	content configures message.
`duration`	`number,`	No	duration configures message.
`onClose`	`() => void,`	No	onClose configures message.
`info`	`(`	Yes	info configures message.
`content`	`MessageContent,`	Yes	content configures message.
`duration`	`number,`	No	duration configures message.
`onClose`	`() => void,`	No	onClose configures message.
`warning`	`(`	Yes	warning configures message.
`content`	`MessageContent,`	Yes	content configures message.
`duration`	`number,`	No	duration configures message.
`onClose`	`() => void,`	No	onClose configures message.
`loading`	`(`	Yes	loading configures message.
`content`	`MessageContent,`	Yes	content configures message.
`duration`	`number,`	No	duration configures message.
`onClose`	`() => void,`	No	onClose configures message.
`destroy`	`(key?: string \| number) => void`	Yes	destroy configures message.
`config`	`(config: MessageConfig) => void`	Yes	config configures message.
`useMessage`	`() => [MessageApi, ReactNode]`	Yes	useMessage configures message.

MessageType type

"success" | "error" | "info" | "warning" | "loading"

MessagePlacement type

"top" | "bottom"

MessageContent type

ReactNode | MessageArgsProps