Severities in React Message component

28 Feb 20235 minutes to read

The severity denotes the importance and context of the message to the user. The message contains different severity types. Use the severity property to display the messages with different severity levels.

The available severity types are Normal, Success, Info, Warning and Error. The default severity type for messages is Normal.

The following example demonstrates the severity of the messages.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<div className="msg-default-section">
        <div className="content-section">
            <MessageComponent id="msg_default" content="Editing is restricted"></MessageComponent>
            <MessageComponent id="msg_info" content="Please read the comments carefully" severity="Info"></MessageComponent>
            <MessageComponent id="msg_success" content="Your message has been sent successfully" severity="Success"></MessageComponent>
            <MessageComponent id="msg_warning" content="There was a problem with your network connection" severity="Warning"></MessageComponent>
            <MessageComponent id="msg_error" content="A problem occurred while submitting your data" severity="Error"></MessageComponent>
        </div>
    </div>);
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';

function App() {
  return (
    <div className="msg-default-section">
        <div className="content-section">
            <MessageComponent id="msg_default" content="Editing is restricted"></MessageComponent>
            <MessageComponent id="msg_info" content="Please read the comments carefully" severity="Info"></MessageComponent>
            <MessageComponent id="msg_success" content="Your message has been sent successfully" severity="Success"></MessageComponent>
            <MessageComponent id="msg_warning" content="There was a problem with your network connection" severity="Warning"></MessageComponent>
            <MessageComponent id="msg_error" content="A problem occurred while submitting your data" severity="Error"></MessageComponent>
        </div>
    </div>
  );
}
export default App;
const root = ReactDOM.createRoot(document.getElementById('sample'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Message</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-react-notifications/styles/material.css" rel="stylesheet" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='sample'>
        <div id='loader'>Loading....</div>
    </div>
    <style>
        /* Sample level styles */
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }

        .msg-default-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 10px;
        }

        .msg-default-section .e-message {
            margin: 10px 0;
        }
    </style>
</body>

</html>