# Alert An inline alert component for communicating status, warnings, or contextual information within a page. Supports leading icon, title, body content with progress bar and action buttons, and configurable trailing UI. **Category:** Components **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-alert--introduction ## Variants documented in Storybook - ContextAlerts: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-alert--contextalerts - ToastAlerts: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-alert--toastalerts - SystemAlerts: https://doc.ux4g.gov.in/web/?path=/story/ux4g-components-alert--systemalerts ## 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 Alert. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Context Alerts — Information Alert HTML: ```html
info Information Title

12:30PM

Action
Detailed information regarding the info status message.
5%
Primary Action Secondary
``` React: ```jsx import React from 'react'; const AlertExample1Demo = () => ( <>
info Information Title

12:30PM

Action
Detailed information regarding the info status message.
5%
Primary Action Secondary
); export default AlertExample1Demo; ``` Angular: ```html
info Information Title

12:30PM

Action
Detailed information regarding the info status message.
5%
Primary Action Secondary
``` ### 2. Context Alerts — Success Alert HTML: ```html
check_circle Success Title

12:30PM

Action
Detailed information regarding the success status message.
100%
Primary Action Secondary
``` React: ```jsx import React from 'react'; const AlertExample2Demo = () => ( <>
check_circle Success Title

12:30PM

Action
Detailed information regarding the success status message.
100%
Primary Action Secondary
); export default AlertExample2Demo; ``` Angular: ```html
check_circle Success Title

12:30PM

Action
Detailed information regarding the success status message.
100%
Primary Action Secondary
``` ### 3. Context Alerts — Warning Alert HTML: ```html
warning Warning Title

12:30PM

Action
Detailed information regarding the warning status message.
60%
Primary Action Secondary
``` React: ```jsx import React from 'react'; const AlertExample3Demo = () => ( <>
warning Warning Title

12:30PM

Action
Detailed information regarding the warning status message.
60%
Primary Action Secondary
); export default AlertExample3Demo; ``` Angular: ```html
warning Warning Title

12:30PM

Action
Detailed information regarding the warning status message.
60%
Primary Action Secondary
``` ### 4. Context Alerts — Error Alert HTML: ```html
error Error Title

12:30PM

Action
Detailed information regarding the error status message.
25%
Primary Action Secondary
``` React: ```jsx import React from 'react'; const AlertExample4Demo = () => ( <>
error Error Title

12:30PM

Action
Detailed information regarding the error status message.
25%
Primary Action Secondary
); export default AlertExample4Demo; ``` Angular: ```html
error Error Title

12:30PM

Action
Detailed information regarding the error status message.
25%
Primary Action Secondary
``` ### 5. Introduction — Introduction HTML: ```html
Components

Alert

An inline alert component for communicating status, warnings, or contextual information within a page. Supports leading icon, title, body content with progress bar and action buttons, and configurable trailing UI.

Implementation Showcase

Visual demonstration of the alert configurations supported by the design system.

Context Alerts

info Information Title
Detailed information regarding the info status message.

Toast Notifications

System Alerts

warning
Warning Write your warning text here
Action

CSS Class Reference

Alert Classes

Base alert container ux4g-alert
Info variant ux4g-alert-info
Success variant ux4g-alert-success
Warning variant ux4g-alert-warning
Error variant ux4g-alert-error
Context alert ux4g-context-alert
Alert icon ux4g-alert-icon
Alert title ux4g-alert-title
Alert message ux4g-alert-message
Alert actions container ux4g-alert-actions
Close button ux4g-alert-close
``` React: ```jsx import React from 'react'; const AlertExample5Demo = () => ( <>
Components

Alert

An inline alert component for communicating status, warnings, or contextual information within a page. Supports leading icon, title, body content with progress bar and action buttons, and configurable trailing UI.

Implementation Showcase

Visual demonstration of the alert configurations supported by the design system.

{/* Context Alerts */}

Context Alerts

info Information Title
Detailed information regarding the info status message.
{/* Toast Notifications */}

Toast Notifications

{/* System Alerts */}

System Alerts

warning
Warning Write your warning text here
Action

CSS Class Reference

{/* Classes */}

Alert Classes

Base alert container ux4g-alert
Info variant ux4g-alert-info
Success variant ux4g-alert-success
Warning variant ux4g-alert-warning
Error variant ux4g-alert-error
Context alert ux4g-context-alert
Alert icon ux4g-alert-icon
Alert title ux4g-alert-title
Alert message ux4g-alert-message
Alert actions container ux4g-alert-actions
Close button ux4g-alert-close
); export default AlertExample5Demo; ``` Angular: ```html
Components

Alert

An inline alert component for communicating status, warnings, or contextual information within a page. Supports leading icon, title, body content with progress bar and action buttons, and configurable trailing UI.

Implementation Showcase

Visual demonstration of the alert configurations supported by the design system.

Context Alerts

info Information Title
Detailed information regarding the info status message.

Toast Notifications

System Alerts

warning
Warning Write your warning text here
Action

CSS Class Reference

Alert Classes

Base alert container ux4g-alert
Info variant ux4g-alert-info
Success variant ux4g-alert-success
Warning variant ux4g-alert-warning
Error variant ux4g-alert-error
Context alert ux4g-context-alert
Alert icon ux4g-alert-icon
Alert title ux4g-alert-title
Alert message ux4g-alert-message
Alert actions container ux4g-alert-actions
Close button ux4g-alert-close
``` ### 6. System Alerts — Fluid Layout (All Variants) HTML: ```html
info
Info Write your info text here
Action
warning
Warning Write your warning text here
Action
error
Error Write your error text here
Action
check_circle
Success Write your success text here
Action
``` React: ```jsx import React from 'react'; const AlertExample6Demo = () => ( <> {/* Variant: Fluid Layout - Info */}
info
Info Write your info text here
Action
{/* Variant: Fluid Layout - Warning */}
warning
Warning Write your warning text here
Action
{/* Variant: Fluid Layout - Error */}
error
Error Write your error text here
Action
{/* Variant: Fluid Layout - Success */}
check_circle
Success Write your success text here
Action
); export default AlertExample6Demo; ``` Angular: ```html
info
Info Write your info text here
Action
warning
Warning Write your warning text here
Action
error
Error Write your error text here
Action
check_circle
Success Write your success text here
Action
``` ### 7. System Alerts — Center Layout (All Variants) HTML: ```html
info Info Write your info text here Action
warning Warning Write your warning text here Action
error Error Write your error text here Action
check_circle Success Write your success text here Action
``` React: ```jsx import React from 'react'; const AlertExample7Demo = () => ( <> {/* Variant: Center Layout - Info */}
info Info Write your info text here Action
{/* Variant: Center Layout - Warning */}
warning Warning Write your warning text here Action
{/* Variant: Center Layout - Error */}
error Error Write your error text here Action
{/* Variant: Center Layout - Success */}
check_circle Success Write your success text here Action
); export default AlertExample7Demo; ``` Angular: ```html
info Info Write your info text here Action
warning Warning Write your warning text here Action
error Error Write your error text here Action
check_circle Success Write your success text here Action
``` ### 8. System Alerts — Wide Layout (All Variants) HTML: ```html
info
Info Write your info text here
Action
warning
Warning Write your warning text here
Action
error
Error Write your error text here
Action
check_circle
Success Write your success text here
Action
``` React: ```jsx import React from 'react'; const AlertExample8Demo = () => ( <> {/* Variant: Wide Layout - Info */}
info
Info Write your info text here
Action
{/* Variant: Wide Layout - Warning */}
warning
Warning Write your warning text here
Action
{/* Variant: Wide Layout - Error */}
error
Error Write your error text here
Action
{/* Variant: Wide Layout - Success */}
check_circle
Success Write your success text here
Action
); export default AlertExample8Demo; ``` Angular: ```html
info
Info Write your info text here
Action
warning
Warning Write your warning text here
Action
error
Error Write your error text here
Action
check_circle
Success Write your success text here
Action
``` ### 9. Toast Alerts — Top Left Position HTML: ```html ``` React: ```jsx import React from 'react'; const AlertExample9Demo = () => ( <> ); export default AlertExample9Demo; ``` Angular: ```html ``` ### 10. Toast Alerts — Top Right Position HTML: ```html ``` React: ```jsx import React from 'react'; const AlertExample10Demo = () => ( <> ); export default AlertExample10Demo; ``` Angular: ```html ``` ### 11. Toast Alerts — Bottom Left Position HTML: ```html ``` React: ```jsx import React from 'react'; const AlertExample11Demo = () => ( <> ); export default AlertExample11Demo; ``` Angular: ```html ``` ### 12. Toast Alerts — Bottom Right Position HTML: ```html ``` React: ```jsx import React from 'react'; const AlertExample12Demo = () => ( <> ); export default AlertExample12Demo; ``` Angular: ```html ``` ## Accessibility notes - Use semantic HTML and required ARIA attributes where the Storybook example shows them. - Ensure visible focus indicators and keyboard operability. - Test color contrast against WCAG 2.1 AA.