Variants in EJ2 JavaScript Message control

10 May 20239 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.

import { Message } from '@syncfusion/ej2-notifications'

    let msgDefault: Message = new Message({});
    msgDefault.appendTo('#msg_default');

    let msgInfo: Message = new Message({
        severity: "Info"
    });
    msgInfo.appendTo('#msg_info');

    let msgSuccess: Message = new Message({
        severity: "Success"
    });
    msgSuccess.appendTo('#msg_success');

    let msgWarning: Message = new Message({
        severity: "Warning"
    });
    msgWarning.appendTo('#msg_warning');

    let msgError: Message = new Message({
        severity: "Error"
    });
    msgError.appendTo('#msg_error');

    let msgDefaultOutlined: Message = new Message({
        variant: "Outlined"
    });
    msgDefaultOutlined.appendTo('#msg_default_outlined');

    let msgInfoOutlined: Message = new Message({
        severity: "Info",
        variant: "Outlined"
    });
    msgInfoOutlined.appendTo('#msg_info_outlined');

    let msgSuccessOutlined: Message = new Message({
        severity: "Success",
        variant: "Outlined"
    });
    msgSuccessOutlined.appendTo('#msg_success_outlined');

    let msgWarningOutlined: Message = new Message({
        severity: "Warning",
        variant: "Outlined"
    });
    msgWarningOutlined.appendTo('#msg_warning_outlined');

    let msgErrorOutlined: Message = new Message({
        severity: "Error",
        variant: "Outlined"
    });
    msgErrorOutlined.appendTo('#msg_error_outlined');

    let msgDefaultFilled: Message = new Message({
        variant: "Filled"
    });
    msgDefaultFilled.appendTo('#msg_default_filled');

    let msgInfoFilled: Message = new Message({
        severity: "Info",
        variant: "Filled"
    });
    msgInfoFilled.appendTo('#msg_info_filled');

    let msgSuccessFilled: Message = new Message({
        severity: "Success",
        variant: "Filled"
    });
    msgSuccessFilled.appendTo('#msg_success_filled');

    let msgWarningFilled: Message = new Message({
        severity: "Warning",
        variant: "Filled"
    });
    msgWarningFilled.appendTo('#msg_warning_filled');

    let msgErrorFilled: Message = new Message({
        severity: "Error",
        variant: "Filled"
    });
    msgErrorFilled.appendTo('#msg_error_filled');
<html><head>
    <title>Essential JS 2 Message control</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 Message control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div class="msg-variant-section">
            <div class="content-section">
                <h4>Filled</h4>
                <div id="msg_default_filled">Editing is restricted</div>
                <div id="msg_info_filled">Please read the comments carefully</div>
                <div id="msg_success_filled">Your message has been sent successfully</div>
                <div id="msg_warning_filled">There was a problem with your network connection</div>
                <div id="msg_error_filled">A problem occurred while submitting your data</div>
            </div>
            <div class="content-section">
                <h4>Outlined</h4>
                <div id="msg_default_outlined">Editing is restricted</div>
                <div id="msg_info_outlined">Please read the comments carefully</div>
                <div id="msg_success_outlined">Your message has been sent successfully</div>
                <div id="msg_warning_outlined">There was a problem with your network connection</div>
                <div id="msg_error_outlined">A problem occurred while submitting your data</div>
            </div>
            <div class="content-section">
                <h4>Text</h4>
                <div id="msg_default">Editing is restricted</div>
                <div id="msg_info">Please read the comments carefully</div>
                <div id="msg_success">Your message has been sent successfully</div>
                <div id="msg_warning">There was a problem with your network connection</div>
                <div id="msg_error">A problem occurred while submitting your data</div>
            </div>
        </div>
    </div>
    <style>
        /* Sample level styles */
        .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>



<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>