# @syncfusion/ej2-notifications

> A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users.

Latest version **34.2.6** (published 2026-09-01) · SEE LICENSE IN license license · 0 weekly downloads

## Install

```sh
npm install @syncfusion/ej2-notifications
pnpm add @syncfusion/ej2-notifications
yarn add @syncfusion/ej2-notifications
bun add @syncfusion/ej2-notifications
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 34.2.6 |
| Published | 2026-09-01 |
| First published | 2018-06-25 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN license |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 3.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 449 |
| Author | Syncfusion Inc. |
| Maintainers | syncfusionorg, essentialjs2, syncfusion-javascript |
| Keywords | ej2, syncfusion, web-components, javascript, typescript, ej2-notification-components, ej2-badge, badges, ej2-toast, toast, toaster, notification, notification badge, circle badge, badge css, toast css, alart |

## Links

- npm: https://www.npmjs.com/package/@syncfusion/ej2-notifications
- Repository: https://github.com/syncfusion/ej2-javascript-ui-controls.git#master
- Homepage: https://www.syncfusion.com/javascript-ui-controls
- Issues: https://github.com/syncfusion/ej2-javascript-ui-controls/issues
- npm.io page: https://npm.io/package/@syncfusion/ej2-notifications

## Dependencies (3)

- [@syncfusion/ej2-base](https://npm.io/package/@syncfusion/ej2-base.md) ~34.2.6
- [@syncfusion/ej2-popups](https://npm.io/package/@syncfusion/ej2-popups.md) ~34.2.6
- [@syncfusion/ej2-buttons](https://npm.io/package/@syncfusion/ej2-buttons.md) ~34.2.6

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 34.2.6 (latest) — 2026-09-01
- 26.1.35-7502 (beta) — 2025-10-07
- 34.2.2 — 2026-08-05
- 34.1.29 — 2026-07-06
- 33.2.7 — 2026-05-19
- 33.2.3 — 2026-04-21
- 33.1.49 — 2026-04-14
- 33.1.44 — 2026-03-16
- 32.2.3 — 2026-02-05
- 32.1.24 — 2026-01-20
- 32.1.22 — 2026-01-06
- 32.1.19 — 2025-12-16
- 31.2.12 — 2025-11-18
- 31.2.2 — 2025-10-15
- 26.1.35-750253 — 2025-09-26
- … 109 more at https://npm.io/package/@syncfusion/ej2-notifications/versions

## README

# 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://ej2.syncfusion.com/home/images/trusted_companies.png" 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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[React](https://www.syncfusion.com/react-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;[ASP.NET&nbsp;Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | [<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/>&nbsp;&nbsp;[ASP.NET&nbsp;MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp; | 
| :-----: | :-----: | :-----: | :-----: | :-----: |

## 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)

## Resources

* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
* [Custom Resource Generator](https://crg.syncfusion.com/)
* [What's New](https://www.syncfusion.com/products/whatsnew/essential-js2?utm_medium=listing&utm_source=github)
* [Road Map](https://www.syncfusion.com/products/roadmap/essential-js2?utm_medium=listing&utm_source=github)
* [E-Books](https://www.syncfusion.com/ebooks?tag=javascript&utm_medium=listing&utm_source=github)

## 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<sup>®</sup> licensed software, including this component, is subject to the terms and conditions of Syncfusion<sup>®</sup> [EULA](https://www.syncfusion.com/eula/es/). To acquire a license for 140+ [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 2026 Syncfusion<sup>®</sup> Inc. All Rights Reserved. The Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> license and copyright applies to this distribution.

---
_Source: https://npm.io/package/@syncfusion/ej2-notifications · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._