Severities in the Blazor Message Component

24 Aug 20264 minutes to read

The severity denotes the importance and context of the message to the user. The message contains different severity types. Use the Severity property to display the messages with different severity levels.

The available severity types are listed below:

  • Normal: Use for general-purpose messages that do not require special emphasis.
  • Success: Use to indicate that an operation or action has completed successfully.
  • Info: Use to provide additional information, guidance, or helpful instructions to users.
  • Warning: Use to alert users to a potential issue or condition that requires attention but does not prevent them from continuing.
  • Error: Use to indicate that an operation has failed or cannot be completed.

The default severity type for messages is Normal.

The following example demonstrates the severity of the messages.

@using Syncfusion.Blazor.Notifications

<div class="msg-default-section">
  <div class="content-section">
    <SfMessage Severity="MessageSeverity.Normal">Editing is restricted</SfMessage>
    <SfMessage Severity="MessageSeverity.Info">Please read the comments carefully</SfMessage>
    <SfMessage Severity="MessageSeverity.Success">Your message has been sent successfully</SfMessage>
    <SfMessage Severity="MessageSeverity.Warning">There was a problem with your network connection</SfMessage>
    <SfMessage Severity="MessageSeverity.Error">A problem has been occurred while submitting your data</SfMessage>
  </div>
</div>
<style>
  .msg-default-section .content-section {
    margin: 0 auto;
    max-width: 450px;
    padding-top: 10px;
  }

  .msg-default-section .e-message {
    margin: 10px 0;
  }
</style>

Message Severity with Icons

Dynamically Update Severity in Blazor Message

In addition to setting a fixed severity, you can dynamically update the message severity by binding the Severity property to a C# variable. This approach is useful when the message state depends on user actions, application logic, or server responses.

The following example demonstrates how to change the message severity at runtime using buttons.

@using Syncfusion.Blazor.Notifications

<div class="message-severity-container">
    <SfMessage Severity="@CurrentSeverity">
        @MessageText
    </SfMessage>

    <div class="button-group">
        <button class="success-btn" @onclick="ShowSuccess">Success</button>
        <button class="warning-btn" @onclick="ShowWarning">Warning</button>
        <button class="error-btn" @onclick="ShowError">Error</button>
    </div>
</div>

@code {
    private MessageSeverity CurrentSeverity = MessageSeverity.Info;
    private string MessageText = "Please review the details.";

    private void ShowSuccess()
    {
        CurrentSeverity = MessageSeverity.Success;
        MessageText = "Data saved successfully.";
    }

    private void ShowWarning()
    {
        CurrentSeverity = MessageSeverity.Warning;
        MessageText = "Some fields require attention.";
    }

    private void ShowError()
    {
        CurrentSeverity = MessageSeverity.Error;
        MessageText = "Failed to save the data.";
    }
}

<style>
    .message-severity-container {
        max-width: 600px;
        margin: 20px auto;
    }

    .button-group {
        display: flex;
        gap: 10px;
        margin-top: 12px;
    }

    .success-btn {
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        background: #d1fae5;
        color: #065f46;
        cursor: pointer;
    }

    .warning-btn {
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        background: #fef3c7;
        color: #92400e;
        cursor: pointer;
    }

    .error-btn {
        border: none;
        border-radius: 20px;
        padding: 8px 16px;
        background: #fee2e2;
        color: #991b1b;
        cursor: pointer;
    }
</style>