OverviewHistoryStatsSecurity
npx skills add ...
Documentation
SKILL.md
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications
Comprehensive guide for implementing Syncfusion React Notification components including Badge, Message, Skeleton, Toast, and Spinner. Use this when applying status indicators and badges with color variants and shapes; showing informational, success, warning, or error messages; configuring severity levels and display variants (Text, Outlined, Filled); handling message dismissal; toast positioning, toast templates, toast animations; displaying skeleton loading placeholders with shimmer animations (Wave, Pulse, Fade) and shapes (Circle, Rectangle, Text); or customizing notification appearance and accessibility.
npx skills add syncfusion/react-ui-components-skills --skill syncfusion-react-notifications
The Syncfusion React Toast component displays brief, non-intrusive notifications that auto-dismiss after a configurable timeout. Toasts support rich content through templates, action buttons, animated entry/exit, precise positioning, and programmatic control via ToastUtility.
🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).
📄 Read: references/getting-started.md
@syncfusion/ej2-react-notifications 🛑 STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2-react-notifications@33.x.x --save. Verify with npm auditToastComponent usage (class and functional patterns)created event📄 Read: references/configuration.md
title and content (plain text, HTML, elements)target container for scoped notificationsshowCloseButton for manual dismissalshowProgressBar and progressDirection (Ltr / Rtl)newestOnTop stacking orderwidth and height dimensions (px, %, auto)📄 Read: references/position.md
📄 Read: references/timeout-and-dismissal.md
timeOut property (default 5000 ms)extendedTimeout on hover (default 1000 ms)timeOut: 0clickToClose in the click eventbeforeClose📄 Read: references/templates-and-styling.md
template property with HTML strings and DOM selectorsshow() call timee-toast-success, e-toast-info, e-toast-warning, e-toast-danger📄 Read: references/animation.md
animation property with show and hide effect settings📄 Read: references/toast-services.md
ToastUtility.show() for quick toasts without component instantiationInformation, Success, Error, WarningToastModel to ToastUtility.show()beforeOpenbeforeOpenbeforeOpen + close📄 Read: references/accessibility.md
role="alert", aria-live="assertive", aria-labelenableRtl📄 Read: references/api.md
show() and hide() method signaturesbeforeOpen, open, click, beforeClose, close, created, destroyed, beforeSanitizeHtml🛑 STOP — Do not start the dev server autonomously. Ask the user to run:
npm run devafter setup.
Use cssClass with e-toast-success, e-toast-info, e-toast-warning, e-toast-danger for visual differentiation — see references/templates-and-styling.md.
Set timeOut: 0 with showCloseButton: true for notifications users must explicitly dismiss — see references/timeout-and-dismissal.md.
Use the buttons property to add Ignore/Confirm/Undo buttons — see references/configuration.md.
Use the beforeOpen event to cancel duplicate toasts already on screen — see references/toast-services.md.
Cap simultaneous toasts at N using beforeOpen and element.childElementCount — see references/toast-services.md.
The Syncfusion MessageComponent 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, custom templates, and full accessibility compliance.
🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).
📄 Read: references/message-getting-started.md
@syncfusion/ej2-react-notifications 🛑 STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2-react-notifications@33.x.x --save. Verify with npm auditMessageComponentcontent prop or JSX children📄 Read: references/message-severities.md
severity prop usage and valid values📄 Read: references/message-variants.md
variant prop usage📄 Read: references/message-icons-and-close.md
showIcon prop (default true)cssClass CSS overridesshowCloseIcon prop (default false)closed event handler for dismiss callbacksvisible prop📄 Read: references/message-customization.md
e-content-center), right (e-content-right)cssClasscontent propenableRtlenablePersistence📄 Read: references/message-accessibility.md
role=alert, aria-label)📄 Read: references/message-api.md
destroy, getPersistDataclosed, created, destroyedMessageCloseEventArgs interfaceSeverity and Variant enum values🛑 STOP — Do not start the dev server autonomously. Ask the user to run:
npm run devafter setup.
The Syncfusion React SkeletonComponent 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.
Package: @syncfusion/ej2-react-notifications
🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).
📄 Read: references/skeleton-getting-started.md
@syncfusion/ej2-react-notifications 🛑 STOP — Do not install packages autonomously. Ask the user to run: npm install @syncfusion/ej2-react-notifications@33.x.x --save. Verify with npm auditSkeletonComponent setup with height and width📄 Read: references/skeleton-shapes.md
shape prop: "Circle", "Square", "Rectangle", "Text" (default)📄 Read: references/skeleton-shimmer-effect.md
shimmerEffect prop: "Wave" (default), "Pulse", "Fade"📄 Read: references/skeleton-styles.md
cssClass prop for custom CSS overrides (wave color, background, animation speed)visible prop to toggle skeleton on/off based on loading state📄 Read: references/skeleton-accessibility.md
role="status", aria-label, aria-live, aria-busylabel prop for accessible skeleton namesenableRtlprefers-reduced-motion respect📄 Read: references/skeleton-api.md
cssClass, enablePersistence, enableRtl, height, label, locale, shape, shimmerEffect, visible, widthdestroy()SkeletonType and ShimmerEffect enum values🛑 STOP — Do not start the dev server autonomously. Ask the user to run:
npm run devafter setup.
| Prop | Type | Default | Purpose |
|---|---|---|---|
shape | 'Text' | 'Circle' | 'Square' | 'Rectangle' | 'Text' | Skeleton shape variant |
width | string | number | '' | Width; required for Circle/Square |
height | string | number | '' | Height; used for Rectangle/Text |
shimmerEffect | 'Wave' | 'Pulse' | 'Fade' | 'Wave' | Animation style |
visible | boolean | true | Show/hide skeleton |
cssClass | string | '' | Custom CSS class(es) |
label | string | 'Loading…' | ARIA label for accessibility |
enableRtl | boolean | false | Right-to-left rendering |
enablePersistence | boolean | false | Persist state across reloads |
A skill for implementing the Syncfusion React Spinner — a load indicator that blocks user interaction with a target element while an operation is in progress.
🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).
📄 Read: references/spinner-getting-started.md
npm install @syncfusion/ej2-react-popups@33.x.x --save. Verify with npm auditcreateSpinner → showSpinner workflow📄 Read: references/spinner-features.md
setSpinnerSpinnerType values (Material, Bootstrap5, Fluent2, etc.)width propertyfinally cleanup📄 Read: references/spinner-api.md
createSpinner(args: SpinnerArgs) — full signature and paramsshowSpinner(container: HTMLElement) — signaturehideSpinner(container: HTMLElement) — signaturesetSpinner(args: SetSpinnerArgs) — signatureSpinnerArgs interface (target, width, label, cssClass, template, type)SetSpinnerArgs interface (template, cssClass, type)SpinnerType values📄 Read: references/spinner-customization.md
cssClass for CSS hook customizationwidth for spinner icon sizingtemplate for custom HTML animationssetSpinner for global defaults📄 Read: references/spinner-accessibility.md
aria-busy on the loading regionaria-live region for screen reader announcementstype: 'HighContrast' for high contrast displays🛑 STOP — Do not start the dev server autonomously. Ask the user to run:
npm run devafter setup.
| Function | Signature | Purpose |
|---|---|---|
createSpinner | (args: SpinnerArgs) => void | Initialize spinner on DOM element |
showSpinner | (el: HTMLElement) => void | Show an existing spinner |
hideSpinner | (el: HTMLElement) => void | Hide a visible spinner |
setSpinner | (args: SetSpinnerArgs) => void | Set global defaults for all spinners |
SpinnerArgs properties: target (required), width, label, cssClass, template, type
SpinnerType values: 'Material' | 'Material3' | 'Fabric' | 'Bootstrap' | 'Bootstrap4' | 'Bootstrap5' | 'HighContrast' | 'Tailwind' | 'Tailwind3' | 'Fluent' | 'Fluent2'
SpinnerComponent class — import { SpinnerComponent } does NOT existcreateSpinner, showSpinner, hideSpinner, setSpinnercolor, size, visible, isLoading as SpinnerArgs — they don't existtarget, width, label, cssClass, template, typecreateSpinner BEFORE showSpinner — order mattersuseEffect — the DOM element must exist before calling createSpinnerhideSpinner in finally — prevents stuck loading states| Issue | Solution |
|---|---|
| Spinner not showing | Ensure createSpinner is called before showSpinner; check DOM element exists |
| Spinner stays visible | Call hideSpinner in finally block; check for unhandled promise rejections |
| No animation | Verify both ej2-base and ej2-react-popups CSS imported; ej2-base must come first |
| TypeScript error | Cast: document.getElementById('id') as HTMLElement or use useRef<HTMLDivElement> |
| Spinner outside bounds | Add position: relative to target element |
| Wrong theme | Set type to match your app's CSS theme (e.g., 'Fluent2' for Fluent 2 CSS) |
The Syncfusion React Badge is a pure CSS component — no React component class to import. Badges are applied by adding CSS modifier classes to a <span> (or <a>) element nested inside the target UI element.
Package: @syncfusion/ej2-react-notifications
🛑 Agentic use: Do not execute multiple steps autonomously. Confirm with the user before each action (install, run, file creation).
📄 Read: references/getting-started.md
npm install @syncfusion/ej2-react-notifications@33.x.x --save. Verify with npm audit📄 Read: references/types-and-shapes.md
📄 Read: references/customization.md
font-size📄 Read: references/how-to.md
1. Install the package:
2. Add CSS to src/App.css:
3. Add a badge in your component:
| Class | Purpose |
|---|---|
e-badge | Required base class for all badges |
e-badge-primary / e-badge-{color} | Color variant |
e-badge-pill | Pill (rounded rectangle) shape |
e-badge-circle | Circle shape |
e-badge-notification | Notification counter badge |
e-badge-dot | Minimalist dot badge (no text) |
e-badge-overlap | Overlaps the parent element edge |
e-badge-bottom | Positions badge at bottom instead of top |
import { ToastUtility } from '@syncfusion/ej2-react-notifications';
// Show a success toast instantly
ToastUtility.show('File saved successfully', 'Success', 3000);
// Show an error toast
ToastUtility.show('Connection failed', 'Error', 5000);npm install @syncfusion/ej2-react-notifications@33.x.x --save
npm auditnpm install @syncfusion/ej2-react-notifications@33.x.x --save
npm auditnpm install @syncfusion/ej2-react-notifications@33.x.x --save
npm audit/* src/App.css */
@import '../node_modules/@syncfusion/ej2-base/styles/tailwind3.css';
@import '../node_modules/@syncfusion/ej2-react-notifications/styles/tailwind3.css';import { MessageComponent } from '@syncfusion/ej2-react-notifications';
import './App.css';
function App() {
return (
<MessageComponent content="Please read the comments carefully" />
);
}
export default App;<MessageComponent content="Editing is restricted" />
<MessageComponent content="Operation completed" severity="Success" />
<MessageComponent content="Read these notes" severity="Info" />
<MessageComponent content="Check your connection" severity="Warning" />
<MessageComponent content="Submission failed" severity="Error" /><MessageComponent content="Editing is restricted" variant="Filled" />
<MessageComponent content="Operation completed" severity="Success" variant="Outlined" />
<MessageComponent content="Submission failed" severity="Error" variant="Filled" />import { useState } from 'react';
function App() {
const [visible, setVisible] = useState(true);
return (
<MessageComponent
content="Your session will expire soon"
severity="Warning"
showCloseIcon={true}
visible={visible}
closed={() => setVisible(false)}
/>
);
}const contentTemplate = () => (
<div>
<h4>Build succeeded</h4>
<p>All 42 tests passed.</p>
</div>
);
<MessageComponent content={contentTemplate} severity="Success" />/* src/App.css */
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
import './App.css';
function App() {
return (
<SkeletonComponent height="15px" width="100%" />
);
}
export default App;import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
function ProfileCardSkeleton() {
return (
<div style={{ display: 'flex', alignItems: 'center', gap: '12px', padding: '16px' }}>
{/* Avatar placeholder */}
<SkeletonComponent shape="Circle" width="48px" />
{/* Name and subtitle placeholders */}
<div style={{ flex: 1 }}>
<SkeletonComponent width="60%" height="15px" />
<br />
<SkeletonComponent width="40%" height="12px" />
</div>
</div>
);
}
export default ProfileCardSkeleton;import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
function DataCard() {
const [loading, setLoading] = React.useState(true);
const [content, setContent] = React.useState('');
React.useEffect(() => {
setTimeout(() => {
setContent('Data loaded successfully');
setLoading(false);
}, 2000);
}, []);
return (
<div>
{loading ? (
<SkeletonComponent width="80%" height="20px" />
) : (
<p>{content}</p>
)}
</div>
);
}
export default DataCard;import { SkeletonComponent } from '@syncfusion/ej2-react-notifications';
import * as React from 'react';
function ListSkeleton() {
return (
<ul style={{ listStyle: 'none', padding: 0 }}>
{[1, 2, 3].map((i) => (
<li key={i} style={{ display: 'flex', gap: '10px', marginBottom: '12px' }}>
<SkeletonComponent shape="Circle" width="40px" shimmerEffect="Pulse" />
<div style={{ flex: 1 }}>
<SkeletonComponent width="70%" height="14px" shimmerEffect="Pulse" />
<br />
<SkeletonComponent width="45%" height="12px" shimmerEffect="Pulse" />
</div>
</li>
))}
</ul>
);
}
export default ListSkeleton;import { createSpinner, showSpinner } from '@syncfusion/ej2-react-popups';
import * as React from 'react';
import { useEffect } from 'react';
import './App.css';
function App() {
useEffect(() => {
createSpinner({
target: document.getElementById('container') as HTMLElement
});
showSpinner(document.getElementById('container') as HTMLElement);
}, []);
return (
<div id="container" style={{ height: '200px' }} />
);
}
export default App;import { createSpinner, showSpinner, hideSpinner } from '@syncfusion/ej2-react-popups';
import { useEffect, useRef, useState } from 'react';
function DataLoader() {
const ref = useRef<HTMLDivElement>(null);
const [loading, setLoading] = useState(false);
useEffect(() => {
if (ref.current) {
createSpinner({ target: ref.current, label: 'Loading...' });
}
}, []);
const load = async () => {
setLoading(true);
showSpinner(ref.current as HTMLElement);
try {
await fetchData();
} finally {
hideSpinner(ref.current as HTMLElement);
setLoading(false);
}
};
return (
<div>
<button onClick={load} disabled={loading}>Load Data</button>
<div ref={ref} style={{ height: '200px', position: 'relative' }} />
</div>
);
}import { setSpinner } from '@syncfusion/ej2-react-popups';
// Call BEFORE any createSpinner — sets global default type
setSpinner({ type: 'Bootstrap5' });const fetchWithSpinner = async (container: HTMLElement) => {
showSpinner(container);
try {
const data = await fetch('/api/data').then(r => r.json());
return data;
} finally {
hideSpinner(container); // Always hide, even on error
}
};useEffect(() => {
if (!ref.current) return;
if (isLoading) {
showSpinner(ref.current);
} else {
hideSpinner(ref.current);
}
}, [isLoading]);useEffect(() => {
createSpinner({ target: document.body, label: 'Initializing...' });
showSpinner(document.body);
initializeApp().finally(() => hideSpinner(document.body));
}, []);createSpinner({
target: el,
type: 'Fluent2',
width: '40px',
label: 'Processing...',
cssClass: 'my-overlay'
});@import "../node_modules/@syncfusion/ej2-base/styles/tailwind3.css";
@import "../node_modules/@syncfusion/ej2-notifications/styles/tailwind3.css";import * as React from 'react';
import './App.css';
function App() {
return (
<h1>Badge Component <span className="e-badge e-badge-primary">New</span></h1>
);
}
export default App;// Parent must have position: relative
<div className="badge-block">
<div className="skype svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-notification">99+</span>
</div><div className="badge-block">
<div className="firefox svg_icons"></div>
<span className="e-badge e-badge-success e-badge-overlap e-badge-dot e-badge-bottom"></span>
</div><h1>Messages <span className="e-badge e-badge-primary e-badge-pill">New</span></h1>