Toast Component

Non-blocking notifications for user feedback

Interactive Demo

Click to show toast
Position
Options

Variants (Static)

Success
Your changes have been saved successfully.
Warning
Connection is unstable. Some data may be delayed.
Error
Failed to save changes. Please try again.
Info
New updates are available for the timing system.

With Progress Bar

Auto-dismiss
This toast will auto-dismiss after the progress bar completes.

With Action Button

Update Available
A new version of the timing system is ready.
Connection Lost
Unable to connect to the timing server.

Accessibility

Built-in A11y Features:

  • role="alert" for screen reader announcement
  • aria-live="polite" on container for non-intrusive updates
  • aria-label on dismiss button
  • aria-hidden on decorative icons
  • Reduced motion support (no animations)
  • Focus visible styles on close button