# Notifications / Reminder Alerts Reminder alert patterns for government services including info, success, warning, and error severity levels with timed expiry notifications and action prompts. **Category:** Patterns **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-reminder-alerts--reminderalertinfo ## Pattern variants - ReminderAlertInfo: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-reminder-alerts--reminderalertinfo - ReminderAlertSuccess: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-reminder-alerts--reminderalertsuccess - ReminderAlertWarning: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-reminder-alerts--reminderalertwarning - ReminderAlertError: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-reminder-alerts--reminderalerterror - ReminderAlertExpired: https://doc.ux4g.gov.in/web/?path=/story/ux4g-patterns-notifications-reminder-alerts--reminderalertexpired ## When to use this pattern Use Notifications / Reminder Alerts when building citizen-facing flows that match the described government journey. Combine components such as cards, forms, tables, buttons, and status indicators as shown in Storybook. ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Notifications / Reminder Alerts. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Reminder Alert Error — Error Reminder Alert HTML: ```html
error 2 days before expiry
Only 2 days left. Submit your Income Certificate before 16 Apr or your draft will be deleted. Resume: bit.ly/resume-mh.
``` React: ```jsx import React from 'react'; const NotificationsReminderAlertsExample1Demo = () => ( <>
error 2 days before expiry
Only 2 days left. Submit your Income Certificate before 16 Apr or your draft will be deleted. Resume: bit.ly/resume-mh.
); export default NotificationsReminderAlertsExample1Demo; ``` Angular: ```html
error 2 days before expiry
Only 2 days left. Submit your Income Certificate before 16 Apr or your draft will be deleted. Resume: bit.ly/resume-mh.
``` ### 2. Reminder Alert Expired — Expired Reminder Alert HTML: ```html
error On expiry day
Your Income Certificate draft expired on 16 Apr. Your saved data has been removed. Start a new application: bit.ly/apply-mh.
Action
``` React: ```jsx import React from 'react'; const NotificationsReminderAlertsExample2Demo = () => ( <>
error On expiry day
Your Income Certificate draft expired on 16 Apr. Your saved data has been removed. Start a new application: bit.ly/apply-mh.
Action
); export default NotificationsReminderAlertsExample2Demo; ``` Angular: ```html
error On expiry day
Your Income Certificate draft expired on 16 Apr. Your saved data has been removed. Start a new application: bit.ly/apply-mh.
Action
``` ### 3. Reminder Alert Info — Info Reminder Alert HTML: ```html
info 30 days before expiry
Your Income Certificate expires on 15 May 2026 (30 days away). Renew early to avoid a service gap: bit.ly/renew-mh.
``` React: ```jsx import React from 'react'; const NotificationsReminderAlertsExample3Demo = () => ( <>
info 30 days before expiry
Your Income Certificate expires on 15 May 2026 (30 days away). Renew early to avoid a service gap: bit.ly/renew-mh.
); export default NotificationsReminderAlertsExample3Demo; ``` Angular: ```html
info 30 days before expiry
Your Income Certificate expires on 15 May 2026 (30 days away). Renew early to avoid a service gap: bit.ly/renew-mh.
``` ### 4. Reminder Alert Success — Success Reminder Alert HTML: ```html
check_circle 1 hour before: Sent 10:13 AM
In 1 hour: Your 11:00 AM field inspection. Revenue Inspector, Sector 12 office. Directions: bit.ly/dir-mh.
``` React: ```jsx import React from 'react'; const NotificationsReminderAlertsExample4Demo = () => ( <>
check_circle 1 hour before: Sent 10:13 AM
In 1 hour: Your 11:00 AM field inspection. Revenue Inspector, Sector 12 office. Directions: bit.ly/dir-mh.
); export default NotificationsReminderAlertsExample4Demo; ``` Angular: ```html
check_circle 1 hour before: Sent 10:13 AM
In 1 hour: Your 11:00 AM field inspection. Revenue Inspector, Sector 12 office. Directions: bit.ly/dir-mh.
``` ### 5. Reminder Alert Warning — Warning Reminder Alert HTML: ```html
warning 5 days before expiry
Your Income Certificate draft expires in 5 days (16 Apr). Resume now: bit.ly/resume-mh.
``` React: ```jsx import React from 'react'; const NotificationsReminderAlertsExample5Demo = () => ( <>
warning 5 days before expiry
Your Income Certificate draft expires in 5 days (16 Apr). Resume now: bit.ly/resume-mh.
); export default NotificationsReminderAlertsExample5Demo; ``` Angular: ```html
warning 5 days before expiry
Your Income Certificate draft expires in 5 days (16 Apr). Resume now: bit.ly/resume-mh.
```