benflux/ui
Feedback

Notification

Rich notifications that appear in a corner of the screen with a title, description, icon, and optional action button. Supports 6 placement positions and animated enter/exit transitions.

Installation

npx benflux-ui add notification

Placements

// 6 placement options
notification.info({ message: "Top Right",    placement: "topRight" })
notification.info({ message: "Top Left",     placement: "topLeft" })
notification.info({ message: "Bottom Right", placement: "bottomRight" })
notification.info({ message: "Bottom Left",  placement: "bottomLeft" })
notification.info({ message: "Top Center",   placement: "top" })
notification.info({ message: "Bottom Ctr",   placement: "bottom" })

Destroy by key

// Open a sticky notification with a key
notification.loading({ message: "Uploading…", key: "upload", duration: 0 })

// Replace it with success
notification.success({ message: "Upload complete!", key: "upload" })

// Destroy all
notification.destroy()

API — notification

PropTypeDefaultDescription
notification.open(config)() => void—Open a notification with a full config object. Returns a close function.
notification.success(config)() => void—Shorthand with success icon
notification.error(config)() => void—Shorthand with error icon
notification.warning(config)() => void—Shorthand with warning icon
notification.info(config)() => void—Shorthand with info icon
notification.destroy(key?)void—Destroy one notification by key, or all if key is omitted

NotificationConfig

interface NotificationConfig {
  message: ReactNode              // Title (required)
  description?: ReactNode         // Subtitle text
  type?: "success" | "error" | "warning" | "info"
  icon?: ReactNode                // Override the default type icon
  key?: string                    // Unique ID — reuses the same slot
  duration?: number               // Auto-close delay in seconds (default: 4.5, 0 = sticky)
  placement?: NotificationPlacement  // Default: "topRight"
  onClose?: () => void
  onClick?: () => void            // Click handler on the notification card
  action?: ReactNode              // Action button rendered at the bottom
  closeIcon?: ReactNode           // Custom close button
}