Basic Toast

Animated React toast notification component with success, error, warning, and info types, auto-dismiss, and stackable design.

Installation

npx smoothui-cli add basic-toast

Features

Toast notifications with four semantic types, configurable duration, and manual close. Click Show in the panel to trigger each type.

Types

Success

Green check icon — confirmations and completed actions.

Error

Red X icon — failures and validation errors.

Warning

Amber alert icon — cautionary messages that need attention.

Info

Blue info icon — neutral updates and tips.

Accessibility

Screen Reader

• Each toast type (success, error, warning, info) displays a corresponding icon with semantic color for visual distinction
• The close button allows manual dismissal of the notification

Reduced Motion

This component respects the prefers-reduced-motion media query via useReducedMotion from Motion. When reduced motion is preferred, the slide-in entrance and exit animations are disabled instantly.

Props