CleenUI · Feedback · Notification

Notification

Toast-style transient notification with semantic variants, dismiss, action button, and queueing.

storybook.cleenui.com · feedback-notification--default
Open in new window

About Notification

Notification is the toast primitive — small floating message boxes that appear briefly to communicate the result of an action. Five semantic variants (info, success, warning, error, neutral), an optional action button, and a configurable timeout.

The notification system queues messages when many fire in rapid succession so users see them sequentially rather than as a stack. Notifications can be pinned to stay open until manually dismissed.

When to use it

  • Save-confirmation toasts after form submission.
  • Error notifications when an API call fails.
  • Background-task completion alerts.
  • Action confirmations with undo buttons.

Common props

Prop
Type
Description
variant
"info" | "success" | "warning" | "error" | "neutral"
Semantic variant.
title
string
Notification title.
body
ReactNode
Notification body content.
action
{ label, onClick }
Optional action button.
timeoutMs
number
Auto-dismiss timeout (0 to disable).
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

3
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.