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 l

Implementing Syncfusion React Notifications Toast 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). Package and Setup 📄 Read: [references/getting started.md](references/toast getting started.md) Installing @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 audit CSS imports for all required themes Basic ToastComponent usage (class and functional patterns) Rendering toast in a custom target container Triggering show in the created event Documentation and Navigation Guide Configuration and Layout 📄 Read: [references/configuration.md](references/toast configuration.md) Setting title and content (plain text, HTML, elements) Custom target container for scoped notifications showCloseButton for manual dismissal showProgressBar and progressDirection (Ltr / Rtl) newestOnTop stacking order width and height dimensions (px, %, auto) Positioning 📄 Read: [references/position.md](references/toast position.md) Nine predefined X/Y positions (Left, Center, Right / Top, Bottom) Custom pixel and percentage coordinates Targeting a container element for relative positioning Multiple Toast instances at different screen positions Timeout and Dismissal 📄 Read: [references/timeout and dismissal.md](references/toast timeout and dismissal.md) timeOut property (default 5000 ms) extendedTimeout on hover (default 1000 ms) Static persistent toasts with timeOut: 0 Click to close via clickToClose in the click event Preventing mobile swipe dismissal with beforeClose Templates and Styling 📄 Read: [references/templates and styling.md](references/toast templates and styling.md) template property with HTML strings and DOM selectors Dynamic templates passed at show() call time Semantic CSS classes: e toast success , e toast info , e toast warning , e toast danger CSS selectors for title, content, icon, and background customization Animation 📄 Read: [references/animation.md](references/toast animation.md) animation property with show and hide effect settings Available effects: FadeIn, FadeZoomIn, SlideBottomIn, ZoomIn, FlipLeftUpIn, and more Default: FadeIn / FadeOut Accessibility: reduced motion considerations Toast Services and Advanced Patterns 📄 Read: [references/toast services.md](references/toast services.md) ToastUtility.show() for quick toasts without component instantiation Four predefined types: Information , Success , Error , Warning Passing a full ToastModel to ToastUtility.show() Playing audio on beforeOpen Restricting maximum simultaneous toasts with beforeOpen Preventing duplicate toasts using beforeOpen + close Accessibility 📄 Read: [references/accessibility.md](references/toast accessibility.md) WAI ARIA: role="alert" , aria live="assertive" , aria label WCAG 2.2, Section 508, ADA compliance Screen reader support (JAWS, NVDA, VoiceOver) RTL support via enableRtl Mobile and accessibility checker validation API Reference 📄 Read: [references/api.md](references/toast api.md) All properties with types, defaults, and descriptions show() and hide() method signatures All events: beforeOpen , open , click , beforeClose , close , created , destroyed , beforeSanitizeHtml Quick Start Example 🛑 STOP — Do not start the dev server autonomously. Ask the user to run: npm run dev after setup. Quick Utility Toast (No Component Needed) Common Patterns Semantic type toasts Use cssClass with e toast success , e toast info , e toast warning , e toast danger for visual differentiation — see [references/templates and styling.md](references/toast templates and styling.md). Static/persistent toasts Set timeOut: 0 with showCloseButton: true for notifications users must explicitly dismiss — see [references/timeout and dismissal.md](references/toast timeout and dismissal.md). Action required toasts Use the buttons property to add Ignore/Confirm/Undo buttons — see [references/configuration.md](references/toast configuration.md). Prevent duplicates Use the beforeOpen event to cancel duplicate toasts already on screen — see [references/toast services.md](references/toast services.md). Limit max visible toasts Cap simultaneous toasts at N using beforeOpen and element.childElementCount — see [references/toast services.md](references/toast services.md). Message 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). Navigation Guide Getting Started 📄 Read: [references/message getting started.md](references/message getting started.md) Installation of @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 audit CSS imports and theme configuration Rendering the first MessageComponent Content via content prop or JSX children Running the Vite development server Severity Levels 📄 Read: [references/message severities.md](references/message severities.md) Five severity levels: Normal, Success, Info, Warning, Error severity prop usage and valid values Visual distinctions (icons and colors per severity) Choosing the right severity for your use case Display Variants 📄 Read: [references/message variants.md](references/message variants.md) Three variants: Text (default), Outlined, Filled variant prop usage Combining variant with severity Visual trade offs and when to use each Icons and Close Icon 📄 Read: [references/message icons and close.md](references/message icons and close.md) Severity icon visibility: showIcon prop (default true ) Disabling severity icons Custom severity icons via cssClass CSS overrides Close icon: showCloseIcon prop (default false ) closed event handler for dismiss callbacks Toggling visibility with the visible prop Customization and Templates 📄 Read: [references/message customization.md](references/message customization.md) 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: JSX element or render function via content prop RTL support via enableRtl Persistence with enablePersistence Accessibility 📄 Read: [references/message accessibility.md](references/message accessibility.md) WCAG 2.2, Section 508, ADA compliance WAI ARIA attributes ( role=alert , aria label ) Keyboard navigation (Tab, Enter/Space) Screen reader support API Reference 📄 Read: [references/message api.md](references/message api.md) All properties with types, defaults, and descriptions Methods: destroy , getPersistData Events: closed , created , destroyed MessageCloseEventArgs interface Severity and Variant enum values Quick Start 🛑 STOP — Do not start the dev server autonomously. Ask the user to run: npm run dev after setup. Common Patterns Severity Messages Variant + Severity Combo Dismissible Message Content Template Skeleton 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). Navigation Guide Getting Started 📄 Read: [references/skeleton getting started.md](references/skeleton getting started.md) Installing @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 audit CSS theme imports (tailwind3) Minimal SkeletonComponent setup with height and width Running the Vite/React app Shapes 📄 Read: [references/skeleton shapes.md](references/skeleton shapes.md) shape prop: "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 📄 Read: [references/skeleton shimmer effect.md](references/skeleton shimmer effect.md) shimmerEffect prop: "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 📄 Read: [references/skeleton styles.md](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 Transition pattern: skeleton → actual content CSS variable customization Accessibility 📄 Read: [references/skeleton accessibility.md](references/skeleton accessibility.md) WCAG 2.2, Section 508, ADA compliance WAI ARIA attributes: role="status" , aria label , aria live , aria busy label prop for accessible skeleton names RTL support via enableRtl prefers reduced motion respect API Reference 📄 Read: [references/skeleton api.md](references/skeleton api.md) All properties: cssClass , enablePersistence , enableRtl , height , label , locale , shape , shimmerEffect , visible , width Methods: destroy() SkeletonType and ShimmerEffect enum values Quick Start 🛑 STOP — Do not start the dev server autonomously. Ask the user to run: npm run dev after setup. Common Patterns Profile Card Skeleton Toggle Skeleton on Data Load Shimmer List with Pulse Effect Key Props at a Glance 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 Spinner 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). Documentation Getting Started 📄

syncfusion-react-notifications