Syncfusion® Blazor Notification Components

A comprehensive suite of Blazor notification and placeholder components for displaying messages, toasts, and loading states. Includes Toast, Message, and Skeleton components.

Supported components

This package includes the following components:

• Blazor Toast
• Blazor Message
• Blazor Skeleton

Blazor Toast component

The Blazor Toast component is a small, nonblocking notification pop-up that displays messages to users with readable content.

Key features:

• Auto Dismissal: Messages disappear automatically after a configurable timeout period
• Positioning: Display toasts at customizable positions (top, bottom, corners)
• Animation Effects: Built-in animation effects for toast appearance and disappearance
• Multiple Toasts: Display multiple toast notifications simultaneously
• Custom Icons: Support for custom icons and visual indicators
• Templates: Rich templates for custom toast content rendering
• Keyboard Navigation: Full keyboard support for accessibility
• Action Buttons: Include action buttons within toast notifications

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Message component

The Blazor Message component is a graphical UI for displaying messages with visual severity levels and contextual information.

Key features:

• Severity Levels: Display messages with different severity types (success, error, warning, info)
• Visual Icons: Built-in icons for different severity levels
• Closeable Messages: Allow users to dismiss messages
• Message Variants: Support for different visual variants and styles
• Custom Templates: Rich templates for custom message content
• Data Binding: Bind to collections for dynamic message display
• Responsive Design: Adapt to different screen sizes
• Accessibility: Full keyboard navigation and ARIA support

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Blazor Skeleton component

The Blazor Skeleton component is a placeholder that animates a shimmer effect to indicate content is loading.

Key features:

• Shimmer Effect: Animated loading state with shimmer animation
• Multiple Shapes: Support for various skeleton shapes (circle, rectangle, text)
• Custom Count: Render multiple skeleton placeholders
• Responsive Layout: Adapt to different screen sizes
• Performance: Lightweight placeholder for faster page loads
• Custom Styling: Customize appearance with CSS and themes
• Template Support: Create custom skeleton layouts
• Accessibility: Semantic HTML with proper ARIA labels

Documentation:

• Getting Started with Blazor Web App
• Getting Started with Blazor WebAssembly App
• Feature Overview
• Live Demos
• API Reference

Add stylesheet and script references

• For Blazor Server App / Blazor Web App, add these to Components/App.razor or App.razor file.
• For Blazor WebAssembly App, add these to wwwroot/index.html file.

<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

Quick start

Register the Syncfusion® Blazor services in the Program.cs file.

using Syncfusion.Blazor;

builder.Services.AddSyncfusionBlazor();

Message

<SfMessage>Please read the comments carefully</SfMessage>
<style>
    .e-message {
        width: 300px;
    }
</style>

Skeleton

<SfSkeleton Height="15px" Width="200px"></SfSkeleton><br/>
<SfSkeleton Height="15px" Width="100px"></SfSkeleton>

Toast

<div class="col-lg-12 control-section toast-default-section">
    <SfToast ID="toast_default" @ref="ToastObj" Title="Adaptive Tiles Meeting" Content="@ToastContent" Timeout="5000" Icon="e-meeting">
        <ToastPosition X="@ToastPosition"></ToastPosition>
    </SfToast>
    <div class="col-lg-12 col-sm-12 col-md-12 center">
        <div id="toastBtnDefault" style="margin: auto; text-align: center">
            <button class="e-btn" @onclick="@ShowOnClick">Show Toasts</button>
            <button class="e-btn" @onclick="@HideOnClick">Hide All</button>
        </div>
    </div>
</div>

<style>
    #toast_default .e-meeting::before {
        content: "\e705";
        font-size: 17px;
    }

    .bootstrap4 #toast_default .e-meeting::before {
        content: "\e763";
        font-size: 20px;
    }
</style>

@code {
    private SfToast ToastObj;
    private string ToastPosition = "Right";
    private string ToastContent = "Conference Room 01 / Building 135 10:00 AM-10:30 AM";

    private async Task ShowOnClick()
    {
        await ToastObj.ShowAsync();
    }

    private async Task HideOnClick()
    {
        await ToastObj.HideAsync("All");
    }
}

Support

• Support portal
• Community forums
• Feature requests

License

This is a commercial product and requires a paid license for possession or use. Review the Syncfusion® EULA.

• Purchase a license
• Start a free 30-day trial

About Syncfusion®

Syncfusion® provides 1600+ UI components and frameworks for web, mobile, and desktop development across multiple platforms:

Web: Blazor | ASP.NET Core | ASP.NET MVC | JavaScript | Angular | React | Vue

Mobile: Flutter | MAUI | UWP

Desktop: WinForms | WPF | WinUI

Learn more at www.syncfusion.com.

sales@syncfusion.com | Toll Free: 1-888-9-DOTNET