Toast Component

A component for displaying temporary notification messages that overlay the UI and automatically disappear after a set duration.

Basic Usage

Create toast notifications with different types and try various options.

Message: Duration (ms): Type:

Position:

Top Left

Top Center

Top Right

Bottom Left

Bottom Center

Bottom Right

At Cursor

Event log - toast events will appear here

API Demo

Use the QdsToastManager global API for quick toast creation.

// Display a toast with default settings
QdsToastManager.show('Default toast message');

// Display a success toast
QdsToastManager.success('Operation completed successfully');

// Display an error toast
QdsToastManager.error('An error occurred');

// Display a warning toast
QdsToastManager.warning('Warning: This action cannot be undone');

// Display an info toast with custom options
QdsToastManager.info('Did you know?', {
  duration: 5000,
  position: 'bottom-center'
});

Multiple Toasts

Testing how multiple toast notifications display.