Feedbackduskmoonimplemented6 demos

notification

notification shows global notices that need more context than a message.

Import@duskmoon-dev/components/notification

8API sections

30documented props

4behavior scenarios

Key API

placementdurationmaxCounttopbottomcloseIcon

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

notification is most often configured through `placement`, `duration`, `maxCount`, `top`.

Covered behavior

Opens typed notifications with placement and description

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

Source

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

export function Example() {
  return (<notification>DuskMoon Notification</notification>);
}

Preview

Opens typed notifications with placement and description

test-backed

notification scenario from the component test coverage: opens typed notifications with placement and description.

Source

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

export function notificationOpensTypedNotificationsWithDemo() {
  return (<notification>DuskMoon Notification</notification>);
}

Preview

Supports key updates, close, destroy, and onClose

test-backed

notification scenario from the component test coverage: supports key updates, close, destroy, and onclose.

Source

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

export function notificationSupportsKeyUpdatesCloseDemo() {
  return (<notification>DuskMoon Notification</notification>);
}

Preview

Config applies maxCount and custom close icon

test-backed

notification scenario from the component test coverage: config applies maxcount and custom close icon.

Source

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

export function notificationConfigAppliesMaxCountAndDemo() {
  return (<notification>DuskMoon Notification</notification>);
}

Preview

UseNotification returns scoped api and context holder

test-backed

notification scenario from the component test coverage: usenotification returns scoped api and context holder.

Source

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

export function notificationUseNotificationReturnsScopedApiDemo() {
  return (<notification>DuskMoon Notification</notification>);
}

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">
  <notification>DuskMoon Notification</notification>
</div>

<div data-theme="moonlight">
  <notification>DuskMoon Notification</notification>
</div>

API

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

Types: packages/components/src/components/notification/Notification.types.tsScenarios: packages/components/src/components/notification/Notification.test.tsx

NotificationConfiginterface

Prop	Type	Required	Description
`placement`	`NotificationPlacement`	No	placement configures notification.
`duration`	`number \| null`	No	duration configures notification.
`maxCount`	`number`	No	maxCount configures notification.
`top`	`number`	No	top configures notification.
`bottom`	`number`	No	bottom configures notification.
`closeIcon`	`ReactNode`	No	closeIcon configures notification.
`getContainer`	`() => HTMLElement`	No	getContainer configures notification.

NotificationArgsPropsinterface

Prop	Type	Required	Description
`key`	`NotificationKey`	No	key configures notification.
`message`	`ReactNode`	Yes	message configures notification.
`description`	`ReactNode`	No	description configures notification.
`btn`	`ReactNode`	No	btn configures notification.
`icon`	`ReactNode`	No	icon configures notification.
`closeIcon`	`ReactNode`	No	closeIcon configures notification.
`placement`	`NotificationPlacement`	No	placement configures notification.
`duration`	`number \| null`	No	duration configures notification.
`type`	`NotificationType`	No	type configures notification.
`className`	`string`	No	className configures notification.
`style`	`CSSProperties`	No	style configures notification.
`role`	`"alert" \| "status"`	No	role configures notification.
`onClick`	`() => void`	No	onClick configures notification.
`onClose`	`() => void`	No	onClose configures notification.

NotificationApiinterface

Prop	Type	Required	Description
`open`	`(config: NotificationArgsProps) => void`	Yes	open configures notification.
`success`	`(config: NotificationArgsProps) => void`	Yes	success configures notification.
`info`	`(config: NotificationArgsProps) => void`	Yes	info configures notification.
`warning`	`(config: NotificationArgsProps) => void`	Yes	warning configures notification.
`error`	`(config: NotificationArgsProps) => void`	Yes	error configures notification.
`close`	`(key: NotificationKey) => void`	Yes	close configures notification.
`destroy`	`(key?: NotificationKey) => void`	Yes	destroy configures notification.

NotificationStaticApiinterface extends NotificationApi

Prop	Type	Required	Description
`config`	`(config: NotificationConfig) => void`	Yes	config configures notification.
`useNotification`	`NotificationUseNotification`	Yes	useNotification configures notification.

NotificationTypetype

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

NotificationPlacementtype

"top" | "topLeft" | "topRight" | "bottom" | "bottomLeft" | "bottomRight"

NotificationKeytype

string | number

NotificationUseNotificationtype

( config?: NotificationConfig, ) => [NotificationApi, ReactNode]