Notification
notificationStacks positioned notification cards with icons, content, actions, and an imperative API.
Usage
Five types
notification.success / error / info / warning / open, derive the left color bar and default icon.
notification.success({ title: "Save successfully", description: "Changes have been synchronized." });
notification.error({ title: "Upload failed", description: "The file is too large, please compress and try again." });
notification.info({ title: "System Notification", description: "The maintenance window will start tonight." });
notification.warning({ title: "Insufficient space", description: "The remaining capacity is less than 10%." });With operation button + permanent
btn slot operation button, it will not close automatically when duration=0.
notification.open({
title: "Received a friend request",
description: "From Design Department·Xiao Lian",
duration: 0,
btn: <Button size="sm">View</Button>,
});Four corner positions
placement Specifies the pop-up location: topRight / topLeft / bottomRight / bottomLeft.
notification.info({ title: "Prompt", description: "Bounce at the specified corner", placement: "bottomLeft" });When to use
Use Notification for a substantial corner message with a title, description, and optional action, such as a friend request or a retryable upload failure. It carries more information than Toast, can persist, and supports actions. Use Toast for one short automatically dismissed line. Calls are imperative, but NotificationProvider must be mounted once by the layout.
Import
import { notification, NotificationProvider, hulianNotificationManager } from "@hulianui/ui"Props
notification.success/error/info/warning/open(options) accepts NotificationOptions:
| Name | Type | Default | Description |
|---|---|---|---|
| type | "open"|"success"|"error"|"info"|"warning" | — | Implied by the method. open is neutral without a default icon; other types derive the accent and icon from Alert-aligned tokens. |
| duration | number | 4500 | Automatic dismissal in milliseconds. 0 remains open. |
| placement | "topRight"|"topLeft"|"bottomRight"|"bottomLeft" | "topRight" | Screen corner. |
The returned NotificationInstance provides destroy(): void for immediate programmatic dismissal.
The notification close control uses the built-in Chinese aria-label "\u5173\u95ed", meaning “Close.”
Events
| Event | Type | Description |
|---|---|---|
| onClose | () => void | Called once after automatic, manual, or programmatic dismissal. |
Slots
| Slot | Type | Description |
|---|---|---|
| title | ReactNode | Bold primary line. |
| description | ReactNode | Muted secondary line. |
| icon | ReactNode | Custom icon replacing the type-derived default. |
| btn | ReactNode | Action area rendered below the description. |
Example
// Automatically closes after 4.5 seconds
notification.success({ title: "Saved", description: "Changes are synchronized." })
// Persistent notification with an action
notification.open({
title: "New friend request",
description: "From the Design team",
duration: 0,
btn: <Button size="sm" onClick={() => {}}>View</Button>,
})Usage guidelines
- Mount NotificationProvider once in the layout, following Toast and Modal. Do not mount it at every call site or showcase.
- Only
duration: 0persists; omission closes after 4500 ms. Set zero explicitly for information that must be acknowledged. - An imperative notification is fire-and-forget.
onCloseruns once but should not depend on stale captured application state; see [[fire-and-forget-side-effect-notification]].
Related
Playground
notification.success({
title: "Action completed",
description: "The data has been successfully synchronized to the cloud.",
placement: "topRight",
duration: 4500,
})