Notification System Demo

Toast notifications appear in the top-right corner and auto-dismiss after a few seconds.

Confirmation dialogs require user action before proceeding.

Loading overlays show progress for long-running operations.

Common use cases from warehouse management operations.

Test the notification queue management (max 5 visible).

Basic Toast

notify.success('Order SO-2025-1001 created successfully!');
notify.error('Failed to save changes. Please try again.');
notify.warning('Stock level below minimum threshold.');
notify.info('Draft saved automatically at 10:30 AM.');

With Action Button

notify.success('Item deleted successfully.', 5000, {
  actionText: 'Undo',
  action: () => restoreItem()
});

Confirmation Dialog

notify.confirm(
  'Are you sure you want to delete these 5 items?',
  () => deleteItems(),
  () => console.log('Cancelled'),
  { danger: true, title: 'Confirm Deletion' }
);

Input Prompt

notify.prompt(
  'Enter picker name to assign:',
  (value) => assignPicker(value),
  { placeholder: 'John Smith', title: 'Assign Picker' }
);

Loading Indicator

const hideLoader = notify.loading('Exporting data...');
await performExport();
hideLoader();
notify.success('Export completed!');