Types

Depending on the outcome of application operations and processes, the Notification enables you to display different types of notifications.

Each Notification type is color-coded which allows the user to immediately recognize if the notification indicates a successful operation or an error message. To use the predefined styles for each Notification type, pass a style to the type property. Based on the Notification type your project requires, you can also display an icon by specifying the icon of the type property.

The Notification provides the following available style type values:

  • none—Renders the default styling options of the component.
  • success—Indicates a successfully completed action.
  • info—Provides neutral information about a process or an action.
  • error—Informs the user about an erroneous outcome of a process or an action.
  • warning—Warns against the occurrence of possible issues.
import React from 'react';
import ReactDOM from 'react-dom';
import { Notification, NotificationGroup } from '@progress/kendo-react-notification';

class App extends React.Component {
    state = { none: false, success: false, error: false, warning: false, info: false };
    onToggle = flag => this.setState({ [flag]: !this.state[flag] });

    render() {
        const { none, success, error, warning, info } = this.state;

        return (
            <React.Fragment>
                <button
                    className="k-button"
                    onClick={() => this.onToggle('none')}
                >
                    {(none ? 'hide ' : 'show ') + 'Default'}
                </button>
                <button
                    className="k-button"
                    onClick={() => this.onToggle('success')}
                >
                    {(success ? 'hide ' : 'show ') + 'Success'}
                </button>
                &nbsp;
                <button
                    className="k-button"
                    onClick={() => this.onToggle('error')}
                >
                    {(error ? 'hide ' : 'show ') + 'Error'}
                </button>
                &nbsp;
                <button
                    className="k-button"
                    onClick={() => this.onToggle('warning')}
                >
                    {(warning ? 'hide ' : 'show ') + 'Warning'}
                </button>
                &nbsp;
                <button
                    className="k-button"
                    onClick={() => this.onToggle('info')}
                >
                    {(info ? 'hide ' : 'show ') + 'Info'}
                </button>
                <NotificationGroup
                    style={{
                        right: 0,
                        bottom: 0,
                        alignItems: 'flex-start',
                        flexWrap: 'wrap-reverse'
                    }}
                >
                    {none && (
                        <Notification
                            type={{ style: 'none', icon: false }}
                            closable={true}
                            onClose={() => this.setState({ none: false })}
                        >
                            Default Notification
                        </Notification>)}
                    {success && (
                        <Notification
                            type={{ style: 'success', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ success: false })}
                        >
                            Success Notification
                        </Notification>)}
                    {error && (
                        <Notification
                            type={{ style: 'error', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ error: false })}
                        >
                            Error Notification
                        </Notification>)}
                    {warning && (
                        <Notification
                            type={{ style: 'warning', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ warning: false })}
                        >
                            Warning Notification
                        </Notification>)}
                    {info && (
                        <Notification
                            type={{ style: 'info', icon: true }}
                            closable={true}
                            onClose={() => this.setState({ info: false })}
                        >
                            Info Notification
                        </Notification>)}
                </NotificationGroup>
            </React.Fragment>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /