@syncfusion/ej2-notifications

# JavaScript Notification Controls ## What's Included in the JavaScript Notification Package The JavaScript Notification package includes the following list of controls. ### JavaScript Badge The [Javascript Badge](https://www.syncfusion.com/javascript-ui-controls/js-badge?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm) control is a pure CSS control used to add notifications, messages, or statuses in different shapes and sizes. The Badge control can be easily integrated with ListView, Avatar, and other container controls. <a href="https://ej2.syncfusion.com/documentation/badge/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/badge/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-badge?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm">Learn more</a> <img alt="JavaScript Badge Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-badge.png"> #### Key features * [Types](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/badge/types.html) - Provided 8 different types of Badges. * [Predefined colors](https://ej2.syncfusion.com/documentation/badge/types/) - Provided 8 predefined situational colors of Badges. * [Position](https://ej2.syncfusion.com/documentation/badge/types/#position) - Supports 3 different positions, such as `default`, `top` and `bottom`. ### JavaScript Message The [JavaScript Message](https://www.syncfusion.com/javascript-ui-controls/js-message?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm) control is a graphical user interface for displaying messages with visual severity levels. It differentiates messages with icons and colors to denote the importance and context of the message. <a href="https://ej2.syncfusion.com/documentation/message/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/message/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-message?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm">Learn more</a> <img alt="JavaScript Message Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-message.png"> #### Key features * [Severity](https://ej2.syncfusion.com/documentation/message/severities/) - Provides an option to display the message with distinctive icons and colors based on the severity type. The available severity types such as **Normal**, **Success**, **Info**, **Warning**, and **Error**. * [Variants](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/message/variants.html) - Provides an option to display the message with predefined appearance variants. The available variants such as **Text**, **Outlined**, and **Filled**. * [Visibility](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/message/default.html) - Provides an option to show or hide the message. * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/message/template.html) - Provides an option to customize the content of the message. ### JavaScript Toast The [JavaScript Toast](https://www.syncfusion.com/javascript-ui-controls/js-toast?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm) control is a small, non-blocking notification pop-up. It is a readable message displayed at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time out) with different animation effects. <a href="https://ej2.syncfusion.com/documentation/toast/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/toast/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-toast?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm">Learn more</a> <img alt="JavaScript Toast Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-toast.png"> #### Key features * [Position](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/toast/positions.html) - Enables to position the toast anywhere on the screen. It has a predefined set of positions and custom inputs for position based on the target. * [Autohide and Timeout](https://ej2.syncfusion.com/documentation/toast/timeout/) - Toast can be expired based on the timeOut property; it hides toast automatically when reaches specific time without user interaction. * [Multi toast](https://ej2.syncfusion.com/documentation/toast/position/) - Toasts can support to display multiple toasts with various time delay. * [Progress bar](https://ej2.syncfusion.com/documentation/toast/config/#progress-bar) - Supports to visually indicate time lapse when the toast expires. * [Action buttons](https://ej2.syncfusion.com/documentation/toast/action-buttons/) - Supports to add buttons in the toast for archiving any actions within the toast. * [Template](https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm#/fluent2/toast/template.html) - User customized element can be defined for the toast using the template property. ### JavaScript Skeleton The [JavaScript Skeleton](https://www.syncfusion.com/javascript-ui-controls/js-skeleton?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notifications-npm) control is a placeholder that animates a shimmer effect to let users know that the page’s content is currently loading. It has several built-in features such as support for shapes, shimmer effect, and UI customization. <a href="https://ej2.syncfusion.com/documentation/skeleton/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notifications-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/demos/?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notifications-npm#/fluent2/skeleton/default.html">Online demos</a> . <a href="https://www.syncfusion.com/javascript-ui-controls/js-skeleton?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notifications-npm">Learn more</a> <img alt="JavaScript Skeleton Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-skeleton.gif"> #### Key features * [Shapes](https://ej2.syncfusion.com/documentation/skeleton/shapes) - Provides various built-in shape variants to design the layout of the page. * [ShimmerEffect](https://ej2.syncfusion.com/documentation/skeleton/shimmer-effect) - Provides an option to display the skeleton with various animation effects. * [Styles](https://ej2.syncfusion.com/documentation/skeleton/styles) - Customize the style of a skeleton. Trusted by the world's leading companies <a href="https://www.syncfusion.com/"> <img src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/syncfusion/syncfusion-trusted-companies.webp" alt="Syncfusion logo"> </a> ## Setup To install `notifications` and its dependent packages, use the following command, ```sh npm install @syncfusion/ej2-notifications ``` ## Supported frameworks Notification controls are also offered to following list of frameworks. | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)      [Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)     | [<img src="https://ej2.syncfusion.com/github/images/react.svg" height="50" />](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)        [React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)       | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)        [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples * Expanse Tracker - [Source](https://github.com/syncfusion/ej2-sample-ts-expensetracker), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/expensetracker/?utm_source=npm&utm_campaign=notification#/dashboard) * Loan Calculator - [Source](https://github.com/syncfusion/ej2-sample-ts-loancalculator), [Live Demo](https://ej2.syncfusion.com/showcase/typescript/loancalculator/?utm_source=npm&utm_campaign=notification) ## Support Product support is available through following mediums. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm) * [GitHub issues](https://github.com/syncfusion/ej2-javascript-ui-controls/issues/new) * [Request feature or report bug](https://www.syncfusion.com/feedback/javascript?utm_source=npm&utm_medium=listing&utm_campaign=javascript-notification-npm) * Live chat ## Changelog Check the changelog [here](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/controls/notifications/CHANGELOG.md?utm_source=npm&utm_campaign=notification). Get minor improvements and bug fixes every week to stay up to date with frequent updates. ## License and copyright > This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [JavaScript UI controls](https://www.syncfusion.com/javascript-ui-controls), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). > A [free community license](https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers. See [LICENSE FILE](https://github.com/syncfusion/ej2-javascript-ui-controls/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. © Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.