Notification Popup displays contextual feedback messages for success, error, warning, alert, and input events with RTL support.
Loading demo: notification-popup-real-world
npx sdaia-ui@latest add notification-popup
import { NotificationPopup } from "@/components/ui/notification-popup"<NotificationPopup type="success" />Use surface="glass" to enable Glass Effect.
Loading demo: notification-popup-glass
Popup notification for general alerts requiring user attention.
Loading demo: notification-popup-alert
Popup notification indicating a potential issue or caution.
Loading demo: notification-popup-warning
Popup notification for errors and failed operations.
Loading demo: notification-popup-error
Popup notification confirming a successful action.
Loading demo: notification-popup-success
Popup notification prompting the user for input.
Loading demo: notification-popup-input
Props for the NotificationPopup component.
Prop | Type | Default | Required |
|---|---|---|---|
type | 'success' | 'error' | 'warning' | 'alert' | 'input' | 'success' | optional |
title | ReactNode | - | required |
description | ReactNode | - | optional |
icon | ReactNode | - | optional |
actions | ReactNode | - | optional |
children | ReactNode | - | optional |
footer | ReactNode | - | optional |
dir | 'ltr' | 'rtl' | - | optional |
rtl | boolean | false (deprecated) | optional |
actionsLayout | "single" | "pair" | "stacked" | — | optional |