Notification

Toast notifications rendered in a portal. Supports 4 types, 6 placements, auto-dismiss, action buttons, and imperative API via useNotification.

Playground

type

placement

message

description

const [api, contextHolder] = useNotification();

// Inside JSX:
{contextHolder}

// Call:
api.success({
  message: 'Operation completed',
  description: 'Your changes have been saved successfully.',
  placement: 'topRight',
});

Types

Four semantic types (success, error, warning, info), each with a matching icon and accent color.

Placement

Six positions: topLeft, topCenter, topRight (default), bottomLeft, bottomCenter, bottomRight.

No auto-dismiss

Set duration={0} to keep the notification until the user closes it.

Action button

Pass a btn prop to render an action (e.g. undo) below the description.

Custom icon

Pass any ReactNode as icon to replace the default type icon.

Max count

useNotification({ maxCount: 3 }) removes the oldest notification when the limit is exceeded.

API: NotificationConfig

Property	Type	Default	Description
`key`	`string`		Unique key. Reuse to update an existing notification instead of creating a new one
`type`	`"success" \| "error" \| "warning" \| "info"`	"info"	Semantic type controlling the icon and accent color
`message`	`ReactNode`		Title text (bold)
`description`	`ReactNode`		Secondary body text shown below the title
`duration`	`number`	4500	Auto-dismiss delay in ms. Set to 0 to disable.
`closable`	`boolean`	true	Show the × close button
`onClose`	`() => void`		Called when the notification is dismissed
`icon`	`ReactNode`		Custom icon, replaces the default type icon
`btn`	`ReactNode`		Action button rendered below the description
`placement`	`NotificationPlacement`	"topRight"	Override placement for this specific notification

API: useNotification(config?)

Returns [api, contextHolder]. Place {contextHolder} anywhere in the JSX tree.

Property	Type	Default	Description
`placement`	`NotificationPlacement`	"topRight"	Default placement for all notifications from this instance
`duration`	`number`	4500	Default auto-dismiss duration in ms
`maxCount`	`number`		Maximum number of notifications visible at once. Oldest are removed when exceeded.