HelpBot Assistant

How can I help you?

Customization in React Message component

20 Feb 202622 minutes to read

The Message component provides multiple customization options to match your application’s design and layout requirements. This guide covers content alignment, visual styling approaches, and CSS-based customization techniques for creating messages that integrate seamlessly with your UI.

Content alignment

By default, message content aligns to the left. The Message component supports alternative alignments using built-in CSS classes: use e-content-center to center-align content, or e-content-right to right-align content. Content alignment is useful for creating varied layouts, such as centered validation messages or right-aligned status notifications.

The following example demonstrates the message with different content alignments.

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">
            <h4>Content Alignment</h4>
            <MessageComponent id="msg_content_left" content="Your license has been activated successfully" severity="Success"></MessageComponent>
            <MessageComponent id="msg_content_center" content="The license will expire today" cssClass="e-content-center" severity="Warning"></MessageComponent>
            <MessageComponent id="msg_content_right" content="The license key is invalid" cssClass="e-content-right" 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-custom-section">
        <div className="content-section">
            <h4>Content Alignment</h4>
            <MessageComponent id="msg_content_left" content="Your license has been activated successfully" severity="Success"></MessageComponent>
            <MessageComponent id="msg_content_center" content="The license will expire today" cssClass="e-content-center" severity="Warning"></MessageComponent>
            <MessageComponent id="msg_content_right" content="The license key is invalid" cssClass="e-content-right" 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-custom-section .content-section {
            margin: 0 auto;
            max-width: 400px;
            padding-top: 10px;
        }

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

</html>

Custom appearance

Customize the Message component’s visual styling by applying a custom CSS class through the cssClass property. The specified class is applied to the root message element, allowing you to override default styles and implement custom designs at the application level.

The following example demonstrates rounded and squared message appearance variations achieved through the cssClass property.

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">
            <h4>Rounded</h4>
            <MessageComponent content="The license will expire today" cssClass="rounded" severity="Warning"></MessageComponent>
            <h4>Square</h4>
            <MessageComponent content="The license key is invalid" cssClass="square" 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-custom-section">
        <div className="content-section">
            <h4>Rounded</h4>
            <MessageComponent content="The license will expire today" cssClass="rounded" severity="Warning"></MessageComponent>
            <h4>Square</h4>
            <MessageComponent content="The license key is invalid" cssClass="square" 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-custom-section .content-section {
            margin: 0 auto;
            max-width: 400px;
            padding-top: 10px;
        }

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

        .msg-custom-section .e-message.rounded {
            border-radius: 5px;
        }

        .msg-custom-section .e-message.square {
            border-radius: 1px;
        }
    </style>
</body>

</html>

CSS-based messages

The Syncfusion Message component supports rendering via predefined CSS classes without requiring JavaScript initialization. This approach is useful for lightweight implementations where you render messages using pure HTML and CSS. CSS-based messages are ideal for static content or server-rendered scenarios.

The following DOM structure is required to display the simple message with the content.

<div class="e-message">
    <div class="e-msg-content">..content..</div>
</div>

The following DOM structure is required to display the simple message with the content and severity icon.

<div class="e-message">
    <span class="e-msg-icon"></span>
    <div class="e-msg-content">..content..</div>
</div>

The following is the available list of predefined CSS classes to make the appearance of a message.

Class Description
e-message Represents the message wrapper.
e-msg-icon Represents the severity type icon.
e-msg-content Represents the message content.
e-msg-close-icon Represents the close icon.
e-info Represents the information message.
e-success Represents the success message.
e-warning Represents the warning message.
e-error Represents the error message.
e-content-center Aligns the message content to the center.
e-content-right Aligns the message content to the right.

The following example demonstrates CSS-based message rendering using predefined classes.

import * as React from "react";
import * as ReactDOM from "react-dom";
function App() {
    return (<div class="msg-default-section">
        <div class="content-section">
            <div id="msg-default" class="e-message" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Editing is restricted</div>
            </div>
            <div id="msg-info" class="e-message e-info" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Please read the comments carefully</div>
            </div>
            <div id="msg-success" class="e-message e-success" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Your message has been sent successfully</div>
            </div>
            <div id="msg-warning" class="e-message e-warning" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">There was a problem with your network connection</div>
            </div>
            <div id="msg-error" class="e-message e-error" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">A problem occurred while submitting your data</div>
            </div>
        </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 class="msg-default-section">
        <div class="content-section">
            <div id="msg-default" class="e-message" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Editing is restricted</div>
            </div>
            <div id="msg-info" class="e-message e-info" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Please read the comments carefully</div>
            </div>
            <div id="msg-success" class="e-message e-success" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">Your message has been sent successfully</div>
            </div>
            <div id="msg-warning" class="e-message e-warning" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">There was a problem with your network connection</div>
            </div>
            <div id="msg-error" class="e-message e-error" role="alert">
                <span class="e-msg-icon"></span>
                <div class="e-msg-content">A problem occurred while submitting your data</div>
            </div>
        </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>