Icons in React Message component

28 Feb 202324 minutes to read

This section explains the message with no icons, how to show or hide the close icon and add the custom severity icon to the message.

No Icon

By default, severity icons can be displayed according to the severity types to make it more understandable to the user by visual information rather than text. To hide the severity icons, set the showIcon property to false.

The following example demonstrates the different severity messages without the severity icons.

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" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_info" content="Please read the comments carefully" severity="Info" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_success" content="Your message has been sent successfully" severity="Success" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_warning" content="There was a problem with your network connection" severity="Warning" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_error" content="A problem occurred while submitting your data" severity="Error" showIcon={false}></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" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_info" content="Please read the comments carefully" severity="Info" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_success" content="Your message has been sent successfully" severity="Success" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_warning" content="There was a problem with your network connection" severity="Warning" showIcon={false}></MessageComponent>
            <MessageComponent id="msg_error" content="A problem occurred while submitting your data" severity="Error" showIcon={false}></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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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>

Custom Icon

By default, the severity icons can be displayed according to the severity type to make it more understandable to the user by visual information rather than text. If the user wants to customize these icons, it can be achieved through the cssClass property.

The following example demonstrates how the default message is rendered with a custom severity icon.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<div className="msg-custom-section">
        <div className="content-section">
            <MessageComponent id="msg_icon" cssClass="custom">Essential JS 2 is a modern JavaScript UI Controls library that has
            been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no
            external dependencies. It also includes complete support for Angular, React, Vue, ASP.NET MVC and ASP.NET Core frameworks.</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-custom-section">
        <div className="content-section">
            <MessageComponent id="msg_icon" cssClass="custom">Essential JS 2 is a modern JavaScript UI Controls library that has
            been built from the ground up to be lightweight, responsive, modular and touch friendly. It is written in TypeScript and has no
            external dependencies. It also includes complete support for Angular, React, Vue, ASP.NET MVC and ASP.NET Core frameworks.</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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/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-custom-section .content-section {
            margin: 0 auto;
            max-width: 400px;
            padding-top: 10px;
        }

        .msg-custom-section .e-message {
            margin: 10px 0;
        }

        @font-face {
            font-family: 'Message_icons';
            src: url(data:application/x-font-ttf;charset=utf-8;base64,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) format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        .custom.e-message .e-msg-icon::before {
            font-family: 'Message_icons';
            content: '\e894';
        }
    </style>
</body>

</html>

Close Icon

The message can be rendered with or without the close icon. The close icon is used to hide the message, either by manually clicking the close icon or through keyboard interaction.

By default, the close icon is not rendered in the message. To show the close icon, set the showCloseIcon property to true.

In the following example, the messages are rendered with the close icon.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [defaultVisible, setDefaultVisible] = useState(true);
    const [defaultCssClass, setDefaultCssClass] = useState('e-outline e-primary msg-hidden');
    const [infoVisible, setInfoVisible] = useState(true);
    const [infoCssClass, setinfoCssClass] = useState('e-outline e-primary e-info msg-hidden');
    const [successVisible, setSuccessVisible] = useState(true);
    const [successCssClass, setSuccessCssClass] = useState('e-outline e-primary e-success msg-hidden');
    const [warningVisible, setWarningVisible] = useState(true);
    const [warningCssClass, setWarningCssClass] = useState('e-outline e-primary e-warning msg-hidden');
    const [errorVisible, setErrorVisible] = useState(true);
    const [errorCssClass, setErrorCssClass] = useState('e-outline e-primary e-error msg-hidden');
    const [showIcon, setShowIcon] = useState(true);
    const [showCloseIcon, setShowCloseIcon] = useState(true);

    const defaultClick = () => {
        setDefaultVisible(true);
        setDefaultCssClass('e-outline e-primary msg-hidden');
    };
    const defaultClosed = () => {
        setDefaultVisible(false);
        setDefaultCssClass('e-outline e-primary');
    };
    const infoClick = () => {
        setInfoVisible(true);
        setinfoCssClass('e-outline e-primary e-info msg-hidden');
    };
    const infoClosed = () => {
        setInfoVisible(false);
        setinfoCssClass('e-outline e-primary e-info');
    };
    const successClick = () => {
        setSuccessVisible(true);
        setSuccessCssClass('e-outline e-primary e-success msg-hidden');
    };
    const successClosed = () => {
        setSuccessVisible(false);
        setSuccessCssClass('e-outline e-primary e-success');
    };
    const warningClick = () => {
        setWarningVisible(true);
        setWarningCssClass('e-outline e-primary e-warning msg-hidden');
    };
    const warningClosed = () => {
        setWarningVisible(false);
        setWarningCssClass('e-outline e-primary e-warning');
    };
    const errorClick = () => {
        setErrorVisible(true);
        setErrorCssClass('e-outline e-primary e-error msg-hidden');
    };
    const errorClosed = () => {
        setErrorVisible(false);
        setErrorCssClass('e-outline e-primary e-warning');
    };
    return (<div className="msg-icon-section">
        <div className="content-section">
        <ButtonComponent id="btn1" content="Show Default Message" cssClass={defaultCssClass} onClick={defaultClick.bind(this)} />
            <MessageComponent id="msg_default_icon" visible={defaultVisible} showCloseIcon={showCloseIcon} closed={defaultClosed.bind(this)} showIcon={showIcon}>Editing is restricted</MessageComponent>
            <ButtonComponent id="btn2" content="Show Info Message" cssClass={infoCssClass} onClick={infoClick.bind(this)} />
            <MessageComponent id="msg_info_icon" severity="Info" showCloseIcon={showCloseIcon} visible={infoVisible} closed={infoClosed.bind(this)} showIcon={showIcon}>Please read the comments carefully</MessageComponent>
            <ButtonComponent id="btn3" content="Show Success Message" cssClass={successCssClass} onClick={successClick.bind(this)} />
            <MessageComponent id="msg_success_icon" severity="Success" showCloseIcon={showCloseIcon} closed={successClosed.bind(this)} visible={successVisible} showIcon={showIcon}>Your message has been sent successfully</MessageComponent>
            <ButtonComponent id="btn4" content="Show Warning Message" cssClass={warningCssClass} onClick={warningClick.bind(this)} />
            <MessageComponent id="msg_warning_icon" severity="Warning" showCloseIcon={showCloseIcon} closed={warningClosed.bind(this)} visible={warningVisible} showIcon={showIcon}>There was a problem with your network connection</MessageComponent>
            <ButtonComponent id="btn5" content="Show Error Message" cssClass={errorCssClass} onClick={errorClick.bind(this)} />
            <MessageComponent id="msg_error_icon" severity="Error" showCloseIcon={showCloseIcon} closed={errorClosed.bind(this)} visible={errorVisible} showIcon={showIcon}>A problem occurred while submitting your data</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';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { useState } from 'react';

function App() {
    const [defaultVisible, setDefaultVisible] = useState<boolean>(true);
    const [defaultCssClass, setDefaultCssClass] = useState<string>('e-outline e-primary msg-hidden');
    const [infoVisible, setInfoVisible] = useState<boolean>(true);
    const [infoCssClass, setinfoCssClass] = useState<string>('e-outline e-primary e-info msg-hidden');
    const [successVisible, setSuccessVisible] = useState<boolean>(true);
    const [successCssClass, setSuccessCssClass] = useState<string>('e-outline e-primary e-success msg-hidden');
    const [warningVisible, setWarningVisible] = useState<boolean>(true);
    const [warningCssClass, setWarningCssClass] = useState<string>('e-outline e-primary e-warning msg-hidden');
    const [errorVisible, setErrorVisible] = useState<boolean>(true);
    const [errorCssClass, setErrorCssClass] = useState<string>('e-outline e-primary e-error msg-hidden');
    const [showIcon, setShowIcon] = useState<boolean>(true);
    const [showCloseIcon, setShowCloseIcon] = useState<boolean>(true);

    const defaultClick = () => {
        setDefaultVisible(true);
        setDefaultCssClass('e-outline e-primary msg-hidden');
    };
    const defaultClosed = () => {
        setDefaultVisible(false);
        setDefaultCssClass('e-outline e-primary');
    };
    const infoClick = () => {
        setInfoVisible(true);
        setinfoCssClass('e-outline e-primary e-info msg-hidden');
    };
    const infoClosed = () => {
        setInfoVisible(false);
        setinfoCssClass('e-outline e-primary e-info');
    };
    const successClick = () => {
        setSuccessVisible(true);
        setSuccessCssClass('e-outline e-primary e-success msg-hidden');
    };
    const successClosed = () => {
        setSuccessVisible(false);
        setSuccessCssClass('e-outline e-primary e-success');
    };
    const warningClick = () => {
        setWarningVisible(true);
        setWarningCssClass('e-outline e-primary e-warning msg-hidden');
    };
    const warningClosed = () => {
        setWarningVisible(false);
        setWarningCssClass('e-outline e-primary e-warning');
    };
    const errorClick = () => {
        setErrorVisible(true);
        setErrorCssClass('e-outline e-primary e-error msg-hidden');
    };
    const errorClosed = () => {
        setErrorVisible(false);
        setErrorCssClass('e-outline e-primary e-warning');
    };

  return (
      <div className="msg-icon-section">
        <div className="content-section">
            <ButtonComponent id="btn1" content="Show Default Message" cssClass={defaultCssClass} onClick={defaultClick.bind(this)} />
            <MessageComponent id="msg_default_icon" visible={defaultVisible} showCloseIcon={showCloseIcon} closed={defaultClosed.bind(this)} showIcon={showIcon}>Editing is restricted</MessageComponent>
            <ButtonComponent id="btn2" content="Show Info Message" cssClass={infoCssClass} onClick={infoClick.bind(this)} />
            <MessageComponent id="msg_info_icon" severity="Info" showCloseIcon={showCloseIcon} visible={infoVisible} closed={infoClosed.bind(this)} showIcon={showIcon}>Please read the comments carefully</MessageComponent>
            <ButtonComponent id="btn3" content="Show Success Message" cssClass={successCssClass} onClick={successClick.bind(this)} />
            <MessageComponent id="msg_success_icon" severity="Success" showCloseIcon={showCloseIcon} closed={successClosed.bind(this)} visible={successVisible} showIcon={showIcon}>Your message has been sent successfully</MessageComponent>
            <ButtonComponent id="btn4" content="Show Warning Message" cssClass={warningCssClass} onClick={warningClick.bind(this)} />
            <MessageComponent id="msg_warning_icon" severity="Warning" showCloseIcon={showCloseIcon} closed={warningClosed.bind(this)} visible={warningVisible} showIcon={showIcon}>There was a problem with your network connection</MessageComponent>
            <ButtonComponent id="btn5" content="Show Error Message" cssClass={errorCssClass} onClick={errorClick.bind(this)} />
            <MessageComponent id="msg_error_icon" severity="Error" showCloseIcon={showCloseIcon} closed={errorClosed.bind(this)} visible={errorVisible} showIcon={showIcon}>A problem occurred while submitting your data</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/29.2.4/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-react-notifications/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.2.4/ej2-react-buttons/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-icon-section .content-section {
            margin: 0 auto;
            max-width: 450px;
            padding-top: 10px;
        }

        .msg-icon-section .e-message {
            margin: 10px 0;
        }

        .msg-icon-section .e-btn {
            display: block;
            margin: 10px 0;
        }

        .msg-icon-section .e-btn.msg-hidden {
            display: none;
        }
    </style>
</body>

</html>