# React Notifications Components

## What's Included in the React Notification Package

The React Notification package includes the following list of components.

### React Badge

The [React Badge](https://www.syncfusion.com/react-components/react-badge?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) component 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/react/documentation/badge/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> .
    <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/badge/default">Online demos</a> .
    <a href="https://www.syncfusion.com/react-components/react-badge?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Badge Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-badge.png">
</p>

#### Key features

* [Types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/badge/types) - Provided 8 different types of Badges.
* [Predefined colors](https://ej2.syncfusion.com/react/documentation/badge/types) - Provided 8 predefined situational colours of Badges.
* [Position](https://ej2.syncfusion.com/react/documentation/badge/types#position) - Supports 3 different positions, such as `default`, `top` and `bottom`.

### React Message

The [React Message](https://www.syncfusion.com/react-components/react-message?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) component 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/react/documentation/message/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> .
    <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/default">Online demos</a> .
    <a href="https://www.syncfusion.com/react-components/react-message?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Message Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-message.png">
</p>

#### Key features

* [Severity](https://ej2.syncfusion.com/react/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/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/variants) - 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/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/default) - Provides an option to show or hide the message.
* [Template](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/template) - Provides an option to customize the content of the message.

### React Toast

The [React Toast](https://www.syncfusion.com/react-components/react-toast?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) component 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/react/documentation/toast/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> .
    <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/toast/default">Online demos</a> .
    <a href="https://www.syncfusion.com/react-components/react-toast?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Toast Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-toast.png">
</p>

#### Key features

* [Position](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/toast/positions) - 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/react/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/react/documentation/toast/position) - Toasts can support to display multiple toasts with various time delay.
* [Progress bar](https://ej2.syncfusion.com/react/documentation/toast/config#progress-bar) - Supports to visually indicate time lapse when the toast expires.
* [Action buttons](https://ej2.syncfusion.com/react/documentation/toast/action-buttons) - Supports to add buttons in the toast for archiving any actions within the toast.
* [Template](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/toast/templates) - User customized element can be defined for the toast using the template property.

### React Skeleton

The [React Skeleton](https://www.syncfusion.com/react-components/react-skeleton?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) component 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/react/documentation/skeleton/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> .
    <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/skeleton/default">Online demos</a> .
    <a href="https://www.syncfusion.com/react-components/react-skeleton?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a>
</p>

<p align="center">
<img alt="React Skeleton Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-skeleton.gif">
</p>

#### Key features

* [Shapes](https://ej2.syncfusion.com/react/documentation/skeleton/shapes) - Provides various built-in shape variants to design the layout of the page.
* [ShimmerEffect](https://ej2.syncfusion.com/react/documentation/skeleton/shimmer-effect) - Provides an option to display the skeleton with various animation effects.
* [Styles](https://ej2.syncfusion.com/react/documentation/skeleton/styles) - Customize the style of a skeleton.

<p align="center">
Trusted by the world's leading companies
  <a href="https://getbootstrap.com/">
    <img src="https://ej2.syncfusion.com/home/images/trusted_companies.png" alt="Bootstrap logo">
  </a>
</p>

## Setup

To install `notifications` and its dependent packages, use the following command.

```sh
npm install @syncfusion/ej2-react-notifications
```

## Supported frameworks

Notification components are also offered in the following list of frameworks.

| [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)&nbsp;&nbsp;&nbsp;&nbsp; | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg"  height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)<br/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[Angular](https://www.syncfusion.com/angular-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

* Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-notfication-npm#/default)

## Resources

* [AI Coding Assistant](https://ej2.syncfusion.com/react/documentation/ai-coding-assistants/overview)
* [Theme Studio](https://ej2.syncfusion.com/themestudio/)
* [What's New](https://www.syncfusion.com/products/whatsnew/react?utm_medium=listing&utm_source=github)
* [Road Map](https://www.syncfusion.com/products/roadmap/react)
* [E-Books](https://www.syncfusion.com/succinctly-free-ebooks?searchkey=react&type=all)

## 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/react-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm)
* [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new)
* [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm)
* Live chat

## Changelog

Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/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+ [React UI components](https://www.syncfusion.com/react-components), 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 [LICNESE FILE](https://github.com/syncfusion/ej2-react-ui-components/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.