Notification Popup
Notification Popup displays contextual feedback messages for success, error, warning, alert, and input events with RTL support.
Loading preview…
Installation
npx sdaia-ui@latest add notification-popup
Usage
import { NotificationPopup } from "@/components/ui/notification-popup"<NotificationPopup type="success" />Examples
Alert
Popup notification for general alerts requiring user attention.
Loading preview…
1
<NotificationPopup2
type="alert"3
title="Turn on Notifications!"4
description="Get timely updates and never miss out on what matters."5
actions={Warning
Popup notification indicating a potential issue or caution.
Loading preview…
1
<NotificationPopup2
type="warning"3
title="Warning!"4
description="You don't have permission to access this feature."5
actions={Error
Popup notification for errors and failed operations.
Loading preview…
1
<NotificationPopup2
type="error"3
title="Error!"4
description="Something went wrong, Try again."5
actions={<Button variant="primary" destructive size="md" fullWidth>Try Again</Button>}Success
Popup notification confirming a successful action.
Loading preview…
1
<NotificationPopup2
type="success"3
title="Success!"4
description="Just a few more steps left, Please go on."5
actions={<Button variant="primary" size="md" fullWidth>Continue</Button>}Input
Popup notification prompting the user for input.
Loading preview…
1
<NotificationPopup2
type="input"3
title="Want 10% Off?"4
description="Sign up for our newsletter for early access & get 10% off your first order, including sale items!"5
actions={API Reference
NotificationPopupProps
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 |