Message Component

The Message component displays messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user.

Usage

To import and use the Message component in your application, use the following code snippet:

import { Message } from '@syncfusion/react-notifications';

<Message closeIcon={true}>Editing is restricted</Message>

import { Message } from '@syncfusion/react-notifications';

<Message closeIcon={true}>Editing is restricted</Message>

Demos

Explore the demos of the React Message component. Refer to this page.

Props

The following table outlines the props for the Message component:

Name	Type	Default	Description
closeIcon	node	false	Shows or hides the close icon in the Message component. An end user can click the close icon to hide the message, and the onClose event will be triggered. When set to `false` (default), the close icon is not rendered. When set to `true`, a default close icon (SVG) is displayed on the right side of the message. When a React node is provided, it will be rendered as a custom close icon, replacing the default one.
icon	node	true	Shows or hides the severity icon in the Message component. This icon will be distinctive based on the severity property. When set to `true` (default), displays a severity-specific icon at the left edge of the Message. When set to `false`, no icon is displayed. When a React node is provided, displays the custom element instead of the default severity icon.
severity	Severity	Severity.Normal	Specifies the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Success, Info, Warning, and Error.
variant	Variant	Variant.Standard	Specifies the variant from predefined appearance variants to display the content of the Message component. The available variants are Standard, Outlined, and Filled.
visible	boolean	true	Shows or hides the visibility of the Message component. When set to false, the Message component will be hidden.

Events

The following table outlines the events for the Message component:

Name	Type	Description
onClose	(event: React.SyntheticEvent) => void	Triggers when the Message component is closed successfully.