Skip to main content Home Creators syncfusion aspnetcore-ui-components-skills syncfusion-aspnetcore-notifications
syncfusion-aspnetcore-notifications Implement Syncfusion ASP.NET Core notification components including Toast, Message, and Skeleton. Use this skill when building toast notifications, brief auto-dismissing alerts, snackbar messages, contextual Message components with severity levels, or Skeleton loading placeholders with shimmer animations. This skill covers positioning, action buttons, severity variants, animation effects, and shape options.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/aspnetcore-ui-components-skills --skill syncfusion-aspnetcore-notificationsThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... name syncfusion-aspnetcore-notifications description Implement Syncfusion ASP.NET Core notification components including Toast, Message, and Skeleton. Use this skill when building toast notifications, brief auto-dismissing alerts, snackbar messages, contextual Message components with severity levels, or Skeleton loading placeholders with shimmer animations. This skill covers positioning, action buttons, severity variants, animation effects, and shape options. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Notifications"}
Implementing Syncfusion ASP.NET Core Notifications
Toast
The Toast component displays brief, auto-dismissing notification messages on screen. It supports positioning, animations, action buttons, progress bars, templates, timeout control, and accessibility—covering simple alerts to rich notification UIs.
Do NOT skip this skill if users mention: notifications, alerts, snackbar, brief messages, dismiss popup, toast utility, progress notification, action button popup.
Component Overview
Key Capabilities
Feature Description Types / cssClass Predefined styles: e-toast-success, e-toast-info, e-toast-warning, e-toast-danger Position X: Left/Center/Right, Y: Top/Bottom or custom pixel/percent values Timeout Auto-dismiss via timeOut;
extendedTimeout
0
Progress Bar Visual countdown bar with showProgressBar; direction via progressDirection
Action Buttons Add button models with click handlers via buttons / e-toast-buttonmodelprops
Templates Full custom HTML via template property or <e-content-template> tag
Animation Custom show/hide animation effects via animation settings
Close Button Manual close via showCloseButton
Multiple Toasts Separate toast instances per position; newestOnTop ordering
Toast Utility ToastUtility.show() for zero-markup quick toasts
Accessibility WAI-ARIA role="alert", WCAG 2.2 AA, Section 508, RTL support
NuGet Package Install-Package Syncfusion.EJ2.AspNet.Core
Setup (one-time) ~/Pages/_ViewImports.cshtml
@addTagHelper *, Syncfusion.EJ2
~/Pages/Shared/_Layout.cshtml<head>:
<link rel="stylesheet" href="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/fluent.css" />
<script src="https://cdn.syncfusion.com/ej2/{{ site.ej2version }}/dist/ej2.min.js"></script>
<ejs-scripts></ejs-scripts>
Documentation & Navigation Guide
📖 Getting Started
Installation and NuGet setup
Tag helper registration
Basic toast with title and content
Triggering toast via JavaScript show() method
First working example
📖 Configuration & Options
Title and content setup
Custom target container
Close button (showCloseButton)
Progress bar (showProgressBar, progressDirection)
Newest-on-top ordering (newestOnTop)
Width and height customization
HTML sanitizer (enableHtmlSanitizer)
📖 Position & Layout
Predefined X/Y positions (Left, Center, Right / Top, Bottom)
Custom pixel or percentage positions
Multiple toasts in different positions
Full-width toast with width="100%"
📖 Timeout & Lifecycle
Auto-dismiss with timeOut (milliseconds)
Extended hover timeout (extendedTimeout)
Static (persistent) toast with timeOut="0"
Closing toast on click/tap
Restricting maximum visible toasts
Preventing duplicate toasts
📖 Action Buttons
Adding buttons with e-toast-buttonmodelprops
Button click handlers
Dismissing toast from a button click
📖 Templates & Animation
Static HTML template via template property
Dynamic content template with <e-content-template>
Changing templates dynamically on show()
Custom show/hide animation effects
Playing audio before toast opens
📖 Toast Types & Styling
Predefined types using cssClass (success, info, warning, danger)
CSS customization for title, content, icon, background
ToastUtility.show() with predefined typesToastUtility.show() with full ToastModelMobile swipe-close prevention
📖 Accessibility
WAI-ARIA role="alert"
WCAG 2.2 AA compliance
Section 508 support
RTL rendering (enableRtl)
Screen reader compatibility
📖 API Reference
All properties with types and defaults
All events (BeforeOpen, Open, Close, BeforeClose, Click, Created, Destroyed, BeforeSanitizeHtml)
Sub-component types (ToastPosition, ToastAnimationSettings, ToastButtonModelProp)
Quick Start Example @* ~/Pages/Index.cshtml *@
<ejs-toast id="toast_default"
title="Friend Request"
content="Matt sent you a friend request."
showCloseButton="true"
showProgressBar="true"
timeOut="5000">
<e-toast-position X="Right" Y="Bottom"></e-toast-position>
</ejs-toast>
<ejs-button id="showBtn" content="Show Toast" cssClass="e-btn"></ejs-button>
<script>
setTimeout(function () {
var toast = document.getElementById('toast_default').ej2_instances[0];
toast.target = document.body;
toast.show();
}, 500);
document.getElementById('showBtn').addEventListener('click', function () {
var toast = document.getElementById('toast_default').ej2_instances[0];
toast.show();
});
</script>
Common Patterns
Pattern 1: Show Typed Notification (Success / Error / Warning / Info) <ejs-toast id="typed_toast">
<e-toast-position X="Right" Y="Top"></e-toast-position>
</ejs-toast>
<script>
var toasts = [
{ title: 'Success !', content: 'Record saved successfully.', cssClass: 'e-toast-success' },
{ title: 'Error !', content: 'Failed to save record.', cssClass: 'e-toast-danger' },
{ title: 'Warning !', content: 'Unsaved changes present.', cssClass: 'e-toast-warning' },
{ title: 'Info !', content: 'Session expires in 5 min.', cssClass: 'e-toast-info' }
];
function showToast(index) {
var toast = document.getElementById('typed_toast').ej2_instances[0];
toast.target = document.body;
toast.show(toasts[index]);
}
</script>
Pattern 2: Toast Utility (Zero Markup)
ejs.notifications .ToastUtility .show ('Record saved successfully' , 'Success' , 5000 );
ejs.notifications .ToastUtility .show ({
title : 'Upload Complete' ,
content : 'Your file has been uploaded.' ,
timeOut : 5000 ,
position : { X : 'Right' , Y : 'Bottom' },
showCloseButton : true
});
Pattern 3: Action Buttons with Close Handler <ejs-toast id="action_toast" title="New Message" timeOut="0">
<e-toast-position X="Right" Y="Bottom"></e-toast-position>
<e-toast-buttonmodelprops>
<e-toast-buttonmodelprop model="ViewBag.AcceptBtn" click="onAccept"></e-toast-buttonmodelprop>
<e-toast-buttonmodelprop model="ViewBag.DismissBtn"></e-toast-buttonmodelprop>
</e-toast-buttonmodelprops>
</ejs-toast>
<script>
function onAccept(e) {
var toastEle = ej.base.closest(e.target, '.e-toast');
document.getElementById('action_toast').ej2_instances[0].hide(toastEle);
}
</script>
ViewBag.AcceptBtn = new { content = "Accept" };
ViewBag.DismissBtn = new { content = "Dismiss" };
Pattern 4: Prevent Duplicate Toast <ejs-toast id="dup_toast" beforeOpen="onBeforeOpen" close="onClose"
title="Alert" content="Network issue detected.">
<e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>
<script>
var isOpen = false;
function onBeforeOpen(e) {
if (isOpen) { e.cancel = true; }
else { isOpen = true; }
}
function onClose() { isOpen = false; }
</script>
Pattern 5: Restrict Maximum Toasts <ejs-toast id="max_toast" beforeOpen="onBeforeOpen"
title="Notification" content="New item added.">
<e-toast-position X="Center" Y="Top"></e-toast-position>
</ejs-toast>
<script>
var maxCount = 3;
function onBeforeOpen(e) {
var toast = document.getElementById('max_toast').ej2_instances[0];
if (toast.element.childElementCount >= maxCount) {
e.cancel = true;
}
}
</script>
Message The Syncfusion Message component displays contextual messages with visual severity indicators—icons and colors—to communicate importance and context to end users. It supports five severity levels, three visual variants, close-icon dismissal, content templates, and full accessibility compliance.
Documentation & Navigation Guide
Getting Started
NuGet installation of Syncfusion.EJ2.AspNet.Core
Tag helper registration in _ViewImports.cshtml
Stylesheet and script registration in _Layout.cshtml
Adding the first <ejs-message> tag helper
Content via content attribute or inner content
First working example
Severity Levels
Five severity levels: Normal, Success, Info, Warning, Error
severity attribute usage and valid valuesVisual distinctions (icons and colors per severity)
Choosing the right severity for your use case
Dynamic severity from a model value
Display Variants
Three variants: Text (default), Outlined, Filled
variant attribute usageCombining variant with severity
Visual trade-offs and when to use each
Icons and Close Icon
Severity icon visibility: showIcon attribute (default true)
Disabling severity icons
Custom severity icons via cssClass CSS overrides
Close icon: showCloseIcon attribute (default false)
closed event handler for dismiss callbacksToggling visibility with the visible attribute
Customization and Templates
Content alignment: left (default), center (e-content-center), right (e-content-right)
Custom appearance with cssClass
CSS-only message rendering (no JS, pure HTML + CSS)
Content templates: <e-content-template> child element
RTL support via enableRtl
Persistence with enablePersistence
Accessibility
WCAG 2.2, Section 508, ADA compliance
WAI-ARIA attributes (role="alert", aria-label)
Keyboard navigation (Tab, Enter/Space)
Screen reader support
API Reference
All properties with types, defaults, and tag attribute names
Events: closed, created, destroyed
Severity and Variant enum valuesTag helper syntax reference
Quick Start @* ~/Pages/Index.cshtml *@
<ejs-message id="msg_default" content="Please read the comments carefully"></ejs-message>
Common Patterns
Severity Messages <ejs-message id="msg_normal" content="Editing is restricted"></ejs-message>
<ejs-message id="msg_success" content="Operation completed" severity="Success"></ejs-message>
<ejs-message id="msg_info" content="Read these notes" severity="Info"></ejs-message>
<ejs-message id="msg_warning" content="Check your connection" severity="Warning"></ejs-message>
<ejs-message id="msg_error" content="Submission failed" severity="Error"></ejs-message>
Variant + Severity Combo <ejs-message id="msg_ft" content="Editing is restricted" variant="Filled"></ejs-message>
<ejs-message id="msg_os" content="Operation completed" severity="Success" variant="Outlined"></ejs-message>
<ejs-message id="msg_fe" content="Submission failed" severity="Error" variant="Filled"></ejs-message>
Dismissible Message <ejs-message id="msg_dismiss"
content="Your session will expire soon"
severity="Warning"
showCloseIcon="true"
visible="true"
closed="onMessageClosed">
</ejs-message>
<script>
function onMessageClosed() {
var msg = document.getElementById('msg_dismiss').ej2_instances[0];
msg.visible = false;
}
</script>
Content Template <ejs-message id="msg_template" severity="Success" showCloseIcon="true" closed="onTemplateClosed">
<e-content-template>
<div>
<h4>Build succeeded</h4>
<p>All 42 tests passed.</p>
</div>
</e-content-template>
</ejs-message>
<script>
function onTemplateClosed() {
document.getElementById('msg_template').ej2_instances[0].visible = false;
}
</script>
Skeleton The Syncfusion Skeleton component renders animated placeholder shapes that mimic the layout of loading content. It reduces perceived load time and communicates progress to users with configurable shapes, shimmer animations, and full accessibility support.
Documentation & Navigation Guide
Getting Started
NuGet installation of Syncfusion.EJ2.AspNet.Core
Tag helper registration in _ViewImports.cshtml
Stylesheet and script registration in _Layout.cshtml
Minimal <ejs-skeleton> setup with height and width
All four shape types (Circle, Square, Text, Rectangle)
Shapes
shape attribute: "Circle", "Square", "Rectangle", "Text" (default)Dimension rules: width required for Circle/Square; width + height for Rectangle/Text
Building multi-shape card skeleton layouts
Choosing the right shape for avatar, image, text, and icon placeholders
Shimmer Effects
shimmerEffect attribute: "Wave" (default), "Pulse", "Fade"Visual behavior of each effect type
List skeleton example with Pulse effect
Selecting an effect to match UI context
Styles and Visibility
cssClass attribute for custom CSS overrides (wave color, background, animation speed)visible attribute to toggle skeleton on/off based on loading stateTransition pattern: skeleton → actual content
CSS variable customization
Accessibility
WCAG 2.2, Section 508, ADA compliance
WAI-ARIA attributes: role="status", aria-label, aria-live, aria-busy
label attribute for accessible skeleton namesRTL support via enableRtl
prefers-reduced-motion respect
API Reference
All properties with types, defaults, and tag attribute names
SkeletonType and ShimmerEffect enum valuesTag helper syntax reference
Quick Start @* ~/Pages/Index.cshtml *@
<ejs-skeleton id="sk_default" height="15px" width="100%"></ejs-skeleton>
Common Patterns
Profile Card Skeleton <div style="display: flex; align-items: center; gap: 12px; padding: 16px;">
@* Avatar placeholder *@
<ejs-skeleton id="sk_avatar" shape="Circle" width="48px"></ejs-skeleton>
@* Name and subtitle placeholders *@
<div style="flex: 1;">
<ejs-skeleton id="sk_name" width="60%" height="15px"></ejs-skeleton>
<br />
<ejs-skeleton id="sk_sub" width="40%" height="12px"></ejs-skeleton>
</div>
</div>
Toggle Skeleton on Data Load @{
var loading = true;
var content = "Data loaded successfully";
}
<div>
@if (loading)
{
<ejs-skeleton id="sk_loader" width="80%" height="20px"></ejs-skeleton>
}
else
{
<p>@content</p>
}
</div>
Shimmer List with Pulse Effect <ul style="list-style: none; padding: 0;">
@for (var i = 1; i <= 3; i++)
{
<li style="display: flex; gap: 10px; margin-bottom: 12px;">
<ejs-skeleton id="@($"sk_av_{i}")" shape="Circle" width="40px" shimmerEffect="Pulse"></ejs-skeleton>
<div style="flex: 1;">
<ejs-skeleton id="@($"sk_t1_{i}")" width="70%" height="14px" shimmerEffect="Pulse"></ejs-skeleton>
<br />
<ejs-skeleton id="@($"sk_t2_{i}")" width="45%" height="12px" shimmerEffect="Pulse"></ejs-skeleton>
</div>
</li>
}
</ul>
Key Properties at a Glance Attribute Type Default Purpose shapeSkeletonTypeTextSkeleton shape variant widthstring""Width; required for Circle/Square heightstring""Height; used for Rectangle/Text shimmerEffectShimmerEffectWaveAnimation style visiblebooltrueShow/hide skeleton css-classstring""Custom CSS class(es) labelstring"Loading..."ARIA label for accessibility enable-rtlboolfalseRight-to-left rendering enable-persistenceboolfalsePersist state across reloads
More from this repository syncfusion-aspnetcore-grid Implements Syncfusion ASP.NET Core Grid component for feature-rich data tables and grids. Use this when working with data display, sorting, filtering, grouping, aggregates, editing, or exporting. This skill covers grid configuration, CRUD operations, virtual scrolling or infinite scrolling, hierarchy grids, state persistence, and advanced data management features for data-intensive applications.
syncfusion-aspnetcore-pivot-table Use this skill when users ask how to build Syncfusion PivotView/pivot tables in ASP.NET Core apps. Trigger for server integration, data binding (API/DB/remote), OLAP, aggregation, drill-down, grouping, filtering, conditional formatting, exporting (Excel/PDF/CSV), or pivot charts in ASP.NET Core. Not for MVC/Blazor/JS.
syncfusion-aspnetcore-ai-assistview Implement the Syncfusion ASP.NET Core AI AssistView control for interactive AI-powered assistance interfaces. Use this skill when implementing AI assistants, prompt suggestions, custom views, file attachments, markdown responses, customizable templates, regenerable responses, thinking capabilities (chain-of-thoughts), generative UI blocks, Text-to-Speech conversion, Speech-to-Text voice input, or customizing advanced AI conversation UI in ASP.NET Core applications.
Related occupations SOC
Based on SOC occupation classification
