Variants in EJ2 TypeScript Message

4 Sep 20269 minutes to read

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

  • Text - The severity is differentiated using a text color and a light background color.
  • Outlined - The severity is indicated through a text color and a border without a background.
  • Filled - The severity is highlighted with 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/34.2.2/material.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='loader'>LOADING....</div>
    <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>
</body>

</html>