Variants in EJ2 TypeScript Message

04 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.

index.ts

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');

index.html

<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/35.1.37/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>