Notification

notification.success()TailwindCSS Modules

Imperative toast API with Coloxo spring enter/exit on by default. Trigger from the canvas — notifications appear on the full page at the configured placement.

InstallationColoxo CLI

npx coloxo add notification --style coloxo-css

ES Module ImportPlayground / npm package

import { notification, NotificationProvider } from '@coloxo/ui';

Design Tokens:

--cx-z-notification: 600--cx-color-bg-primary: #FFFFFF--cx-shadow-lg--cx-radius-xl: 20px

1. Interactive Configurator

Use the canvas trigger to fire notifications on the whole page. Placement, animation, and stacking follow the controls.

Type

Placement

Duration (ms)

Animated

Show Progress Bar

Visual Render CanvasPLACEMENT: TOPRIGHT · ANIMATED: ON

Notifications render on the full page at the configured placement — click repeatedly to stack more.

tsx

1notification.success({2  title: "Payment received",3  description: "Invoice settled successfully.",4});

2. Dark theme

Notifications inherit the application color scheme and still use the full-page viewport.

Renders on the page at bottom-right.

Accessibility

ARIA Roles

Notifications use role='alert' or role='status' depending on severity.

Reduced motion

Enter/exit animations collapse when prefers-reduced-motion is set.

Pause on Hover

Timers pause while users hover or focus the notification.

Props

Name	Type	Default	Description
duration	number \| false	4500	Auto-close delay in ms; false/0 stays open.
placement	"top" \| "topLeft" \| "topRight" \| "bottom" \| "bottomLeft" \| "bottomRight"	topRight	Viewport corner (Ant Design).
title / message	ReactNode	—	Heading; message is the Ant Design alias.
description	ReactNode	—	Supporting content.
actions / btn	ReactNode	—	Custom action group; btn is deprecated.
action	{ label, onClick }	—	Legacy single text action.
key / id	string	—	Stable id; same key updates the notification.
icon	ReactNode \| null	—	Custom icon; null hides.
closable	boolean \| { closeIcon?, onClose? }	true	Close control.
closeIcon	ReactNode \| false \| null	—	Custom close icon; false/null hides.
showProgress	boolean	—	Progress bar for auto-close.
layout	"default" \| "avatar" \| "image" \| "progress"	—	Untitled-style layout; inferred from avatar/image/progress when omitted.
avatar	ReactNode \| { src?, alt?, initials?, status?, size? }	—	Leading avatar (avatar layout).
image	ReactNode \| { src, alt? }	—	Leading 64px thumbnail (image layout).
progress	number \| { value, max?, label?, showValue? }	—	In-card determinate bar; duration defaults to false when unset.
notification.avatar / image / progress	fn	—	Convenience open helpers for Untitled layouts.
pauseOnHover	boolean	true	Pause timer while hovered.
animated	boolean \| { enabled?, delay? }	true	Coloxo spring enter/exit (scale + opacity). false disables; { delay } staggers enter in ms.
stack	boolean \| { threshold }	{ threshold: 3 }	Collapse when count exceeds threshold.
maxCount	number	—	Drop oldest when exceeded.
top / bottom	number	24	Viewport offset in px.
notification.open / destroy	fn	—	open(config); destroy(key?) clears one or all.