HelpBot Assistant

How can I help you?

Message style variants

20 Feb 202611 minutes to read

Message variants define the visual presentation and styling approach for messages. The Message component supports three predefined variants that offer different design aesthetics. Configure the variant using the variant property.

The Message component provides three style variants:

  • Text (default) - Applies subtle styling with a light background and colored text. This variant works well for non-intrusive messages or when space is limited.
  • Outlined - Uses a colored border with matching text on a transparent background. This variant provides clear visual distinction without a filled background, ideal for balanced emphasis.
  • Filled - Applies bold styling with a dark background and contrasting text. This variant commands attention and is suitable for critical messages or high-priority content.

The following example demonstrates all available variant types and their visual styling.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { MessageComponent } from '@syncfusion/ej2-react-notifications';
function App() {
    return (<div className="msg-variant-section">
        <div className="content-section">
            <h4>Filled</h4>
            <MessageComponent id="msg_default_filled" variant="Filled">Editing is restricted</MessageComponent>
            <MessageComponent id="msg_info_filled" severity="Info" variant="Filled">Please read the comments carefully</MessageComponent>
            <MessageComponent id="msg_success_filled" severity="Success" variant="Filled">Your message has been sent successfully</MessageComponent>
            <MessageComponent id="msg_warning_filled" severity="Warning" variant="Filled">There was a problem with your network connection</MessageComponent>
            <MessageComponent id="msg_error_filled" severity="Error" variant="Filled">A problem occurred while submitting your data</MessageComponent>
        </div>
        <div className="content-section">
            <h4>Outlined</h4>
            <MessageComponent id="msg_default_outlined" variant="Outlined">Editing is restricted</MessageComponent>
            <MessageComponent id="msg_info_outlined" severity="Info" variant="Outlined">Please read the comments carefully</MessageComponent>
            <MessageComponent id="msg_success_outlined" severity="Success" variant="Outlined">Your message has been sent successfully</MessageComponent>
            <MessageComponent id="msg_warning_outlined" severity="Warning" variant="Outlined">There was a problem with your network connection</MessageComponent>
            <MessageComponent id="msg_error_outlined" severity="Error" variant="Outlined">A problem occurred while submitting your data</MessageComponent>
        </div>
        <div className="content-section">
            <h4>Text</h4>
            <MessageComponent id="msg_default">Editing is restricted</MessageComponent>
            <MessageComponent id="msg_info" severity="Info">Please read the comments carefully</MessageComponent>
            <MessageComponent id="msg_success" severity="Success">Your message has been sent successfully</MessageComponent>
            <MessageComponent id="msg_warning" severity="Warning">There was a problem with your network connection</MessageComponent>
            <MessageComponent id="msg_error" severity="Error">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';

function App() {
  return (
     <div className="msg-variant-section">
        <div className="content-section">
            <h4>Filled</h4>
            <MessageComponent id="msg_default_filled" variant="Filled">Editing is restricted</MessageComponent>
            <MessageComponent id="msg_info_filled" severity="Info" variant="Filled">Please read the comments carefully</MessageComponent>
            <MessageComponent id="msg_success_filled" severity="Success" variant="Filled">Your message has been sent successfully</MessageComponent>
            <MessageComponent id="msg_warning_filled" severity="Warning" variant="Filled">There was a problem with your network connection</MessageComponent>
            <MessageComponent id="msg_error_filled" severity="Error" variant="Filled">A problem occurred while submitting your data</MessageComponent>
        </div>
        <div className="content-section">
            <h4>Outlined</h4>
            <MessageComponent id="msg_default_outlined" variant="Outlined">Editing is restricted</MessageComponent>
            <MessageComponent id="msg_info_outlined" severity="Info" variant="Outlined">Please read the comments carefully</MessageComponent>
            <MessageComponent id="msg_success_outlined" severity="Success" variant="Outlined">Your message has been sent successfully</MessageComponent>
            <MessageComponent id="msg_warning_outlined" severity="Warning" variant="Outlined">There was a problem with your network connection</MessageComponent>
            <MessageComponent id="msg_error_outlined" severity="Error" variant="Outlined">A problem occurred while submitting your data</MessageComponent>
        </div>
        <div className="content-section">
            <h4>Text</h4>
            <MessageComponent id="msg_default">Editing is restricted</MessageComponent>
            <MessageComponent id="msg_info" severity="Info">Please read the comments carefully</MessageComponent>
            <MessageComponent id="msg_success" severity="Success">Your message has been sent successfully</MessageComponent>
            <MessageComponent id="msg_warning" severity="Warning">There was a problem with your network connection</MessageComponent>
            <MessageComponent id="msg_error" severity="Error">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/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-variant-section .content-section {
            margin: 0 auto;
            max-width: 520px;
            padding: 10px;
        }

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

        .msg-variant-section {
            display: flex;
        }
    </style>
</body>

</html>