HelpBot Assistant

How can I help you?

Message severity levels

20 Feb 20266 minutes to read

Message severity communicates the importance and type of information being conveyed to users. Different severity levels use distinct visual styling and icons to help users quickly understand the message context. Use the severity property to specify the message type.

The Message component supports five severity levels: Normal (default), Success (confirmation or positive outcomes), Info (informational content), Warning (caution or potential issues), and Error (critical issues or failures).

The following example demonstrates all available severity levels and their visual representations.

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/32.2.3/ej2-base/styles/tailwind3.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/32.2.3/ej2-react-notifications/styles/tailwind3.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>