Class SfMessage

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

Inheritance

System.Object

SfBaseComponent

SfMessage

Inherited Members

SfBaseComponent.Dispose()

SfBaseComponent.Dispose(Boolean)

SfBaseComponent.GetEffectivePlatform()

SfBaseComponent.GetMainComponentPlatform()

SfBaseComponent.IsMainLicenseComponent()

SfBaseComponent.LicenseContext

SfBaseComponent.OnAfterRenderAsync(Boolean)

SfBaseComponent.OnInitializedAsync()

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

SfBaseComponent.ValidateLicense()

Namespace: Syncfusion.Blazor.Notifications

Assembly: Syncfusion.Blazor.dll

Syntax

public class SfMessage : SfBaseComponent

Examples

The below code example shows Message component with simple content.

<SfMessage Severity="MessageSeverity.Success">
    <p>The <b>Nature.png</b> file is uploaded successfully.</p>
</SfMessage>

The below code example shows the Message component with multiline content.

<SfMessage Severity="MessageSeverity.Info" ShowIcon="false">
    <div>
        <h3>Transform your web apps today with Syncfusion Blazor components</h3>
        <ul>
            <li><span>70+ high-performance and responsive UI components</span></li>
            <li><span>Dedicated support</span></li>
            <li><span>Hassle-free licensing</span></li>
        </ul>
        <div><a href="https://www.syncfusion.com/downloads/blazor/" target="_blank"><button>Try It for Free</button></a></div>
    </div>
</SfMessage>

Constructors

SfMessage()

Declaration

public SfMessage()

Properties

ChildContent

Gets or sets the child content for the Message component, including the HTML elements.

Declaration

public RenderFragment ChildContent { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.RenderFragment	The template content. The default value is null.

Remarks

The child content which is specified within SfMessage tag directive is either a string or HTML elements.

Examples

The below code example shows the Message component with simple content.

<SfMessage Severity="MessageSeverity.Success">
    <p>The <b>Nature.png</b> file is uploaded successfully.</p>
</SfMessage>

The below code example shows the Message component with multiline content.

<SfMessage Severity="MessageSeverity.Info" ShowIcon="false">
    <div>
        <h3>Transform your web apps today with Syncfusion Blazor components</h3>
        <ul>
            <li><span>70+ high-performance and responsive UI components</span></li>
            <li><span>Dedicated support</span></li>
            <li><span>Hassle-free licensing</span></li>
        </ul>
        <div><a href="https://www.syncfusion.com/downloads/blazor/" target="_blank"><button>Try It for Free</button></a></div>
    </div>
</SfMessage>

Closed

Triggers when the Message component is closed (hidden) successfully.

Declaration

public EventCallback<MessageCloseEventArgs> Closed { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<MessageCloseEventArgs>	An Microsoft.AspNetCore.Components.EventCallback<> of type MessageCloseEventArgs that is invoked when the message is closed.

Remarks

This event is triggered when the user closes the message by clicking the close icon (when ShowCloseIcon is true) or when the message is closed programmatically. The event provides information about how the message was closed through the MessageCloseEventArgs parameter.

Examples

The below code example shows how to handle the Closed event.

<SfMessage ShowCloseIcon="true" Closed="OnMessageClosed">
    <p>Click the close icon to close this message.</p>
</SfMessage>

@code {
    private void OnMessageClosed(MessageCloseEventArgs args)
    {
        Console.WriteLine($"Message closed. IsInteracted: {args.IsInteracted}");
    }
}

ContentAlignment

Gets or sets the alignment of message content. The available content alignments are Left, Center and Right.

Declaration

public HorizontalAlign ContentAlignment { get; set; }

Property Value

Type	Description
HorizontalAlign	One of the HorizontalAlign enumeration. The default value is Left.

Remarks

This property controls how the content within the message is aligned horizontally. The alignment affects the positioning of text and other content elements within the message container.

Examples

The below code example shows Message component with center aligned content.

<SfMessage ContentAlignment="HorizontalAlign.Center" Severity="MessageSeverity.Info">
    <p>This message content is center aligned.</p>
</SfMessage>

CssClass

Gets or sets the CSS class or multiple classes separated by space that can be appended with the root element of the Message component to customize a message.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string containing CSS class names separated by spaces. The default value is String.Empty.

Remarks

This property allows you to apply custom styling to the Message component by adding your own CSS classes. Multiple classes can be specified by separating them with spaces. These classes are applied to the root element of the component, enabling comprehensive customization of the message appearance.

Examples

The below code example shows border customization of the Message component.

<SfMessage CssClass="custom">
   Conference Room no 01 / Building 135 10:00 AM - 10:30 AM
</SfMessage>
<style>
.custom {
    border-color: pink;
}
</style>

Severity

Gets or sets the severity of the message, which is used to define the appearance (icons and colors) of the message. The available severity messages are Normal, Info, Success, Warning and Error.

Declaration

public MessageSeverity Severity { get; set; }

Property Value

Type	Description
MessageSeverity	One of the MessageSeverity enumeration. The default value is Normal.

Remarks

This property determines the visual styling and semantic meaning of the message by applying appropriate colors, icons, and styling based on the severity level. Each severity type conveys different levels of importance and context to the user, helping them understand the nature of the message at a glance.

Examples

The below code example shows Message component with different severity levels.

<SfMessage Severity="MessageSeverity.Success">
    <p>Operation completed successfully!</p>
</SfMessage>
<SfMessage Severity="MessageSeverity.Warning">
    <p>Please review the input data.</p>
</SfMessage>
<SfMessage Severity="MessageSeverity.Error">
    <p>An error occurred during processing.</p>
</SfMessage>

ShowCloseIcon

Gets or sets whether to show or hide the close icon in the Message component. The end user can click the close icon to hide the message. The Closed event triggered when message closed.

Declaration

public bool ShowCloseIcon { get; set; }

Property Value

Type	Description
System.Boolean	true if the close icon for the Message component is visible at the top right corner of the Message component; otherwise, false. The default value is false.

Remarks

When this property is set to true, a close icon appears in the top-right corner of the message, allowing users to dismiss the message by clicking on it. When the message is closed, the Closed event is triggered, providing an opportunity to handle the close action programmatically.

Examples

The below code example shows Message component with close icon enabled.

<SfMessage ShowCloseIcon="true" Severity="MessageSeverity.Info" Closed="OnMessageClosed">
    <p>This message can be closed by clicking the close icon.</p>
</SfMessage>

ShowIcon

Gets or sets whether to show or hide the severity icon in the Message component. When set to true, the severity icon is displayed at the left edge of the Message component. This icon will be distinctive based on the Severity property.

Declaration

public bool ShowIcon { get; set; }

Property Value

Type	Description
System.Boolean	true if the severity icon is displayed in the Message component; otherwise, false hides the severity icon. The default value is true.

Remarks

This property controls the visibility of the severity icon that appears at the left edge of the message. The icon is automatically selected based on the Severity property value, providing visual context for the message type. When set to false, only the text content and optional close icon are displayed.

Examples

The below code example shows Message component with severity icon hidden.

<SfMessage ShowIcon="false" Severity="MessageSeverity.Warning">
    <p>This warning message displays without an icon.</p>
</SfMessage>

Variant

Gets or sets the variant from predefined appearance variants to display the content of the Message component. The available variants are Text, Outlined and Filled.

Declaration

public MessageVariant Variant { get; set; }

Property Value

Type	Description
MessageVariant	One of the MessageVariant enumeration. The default value is Text.

Remarks

This property determines the visual style and appearance of the message component. The Text variant provides a minimal appearance with just text styling, Outlined adds border styling around the message, and Filled applies a solid background color to emphasize the message content.

Examples

The below code example shows Message component with different variants.

<SfMessage Variant="MessageVariant.Outlined" Severity="MessageSeverity.Info">
    <p>This is an outlined message.</p>
</SfMessage>
<SfMessage Variant="MessageVariant.Filled" Severity="MessageSeverity.Success">
    <p>This is a filled message.</p>
</SfMessage>

Visible

Gets or sets the visibility of the Message component. The Message component will be hidden when set to false.

Declaration

public bool Visible { get; set; }

Property Value

Type	Description
System.Boolean	true if the Message component is visible; otherwise, false hides the Message component. The default value is true.

Remarks

This property controls whether the message is displayed or hidden from view. When set to false, the message is completely hidden from the user interface. This property supports two-way data binding through the VisibleChanged event callback.

Examples

The below code example shows Message component with visibility control.

<SfMessage @bind-Visible="isMessageVisible" Severity="MessageSeverity.Info">
    <p>This message visibility can be controlled programmatically.</p>
</SfMessage>
<button @onclick="ToggleVisibility">Toggle Message</button>

VisibleChanged

Gets or sets a callback for the bound Visible property value.

Declaration

public EventCallback<bool> VisibleChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Boolean>	An Microsoft.AspNetCore.Components.EventCallback<> of type bool that is invoked when the Visible property changes.

Remarks

This event callback enables two-way data binding for the Visible property. It is automatically invoked when the visibility state of the message changes, allowing parent components to react to visibility changes or maintain synchronization with bound data.

Methods

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

OnParametersSetAsync()

Declaration

protected override Task OnParametersSetAsync()

Returns

Type
System.Threading.Tasks.Task