Search results

Variants in React Message component

02 Feb 2023 / 2 minutes to read

The Message has predefined appearance variants for different visual representations. The variants of the message can be changed based on the variant property.

The available variants are Text, Outlined and Filled. The default variant type for messages is Text.

  • Text - The severity is differentiated using a text color and a light background color.
  • Outlined - The severity is differentiated using a text color and a border without a background.
  • Filled - The severity is differentiated using a text color and a dark background color.

The following example demonstrates the default message with different variant types.

Source
Preview
index.jsx
index.html
index.tsx
Copied to clipboard
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 />);
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/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>
</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>
Copied to clipboard
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 />);