@syncfusion/ej2-notifications
Version:
A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users.
140 lines (95 loc) • 12.4 kB
Markdown
# 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.
<p align="center">
<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>
</p>
<p align="center">
<img alt="JavaScript Badge Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-badge.png">
</p>
#### 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.
<p align="center">
<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>
</p>
<p align="center">
<img alt="JavaScript Message Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-message.png">
</p>
#### 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.
<p align="center">
<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>
</p>
<p align="center">
<img alt="JavaScript Toast Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-toast.png">
</p>
#### 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.
<p align="center">
<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>
</p>
<p align="center">
<img alt="JavaScript Skeleton Control" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/javascript/javascript-skeleton.gif">
</p>
#### 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.
<p align="center">
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>
</p>
## 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)<br/> [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)<br/> [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)<br/> [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)<br/> [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)<br/> [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<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.