sigpro-ui/docs/components/toast.md

Toast

Toast notification utility for displaying temporary messages that automatically dismiss after a specified duration. Can be used programmatically.

Function

Toast(message, type = 'alert-info', duration = 3500)

Param	Type	Default	Description
message	string | VNode	-	Message content to display
type	string	'alert-info'	Alert type: 'alert-info', 'alert-success', 'alert-warning', 'alert-error'
duration	number	3500	Auto-dismiss duration in milliseconds

Live Examples

Basic Toast

Live Demo

const BasicDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
    Button({ 
      class: 'btn btn-info',
      onclick: () => Toast('This is an info message', 'alert-info', 3000)
    }, 'Info Toast'),
    Button({ 
      class: 'btn btn-success',
      onclick: () => Toast('Operation successful!', 'alert-success', 3000)
    }, 'Success Toast'),
    Button({ 
      class: 'btn btn-warning',
      onclick: () => Toast('Please check your input', 'alert-warning', 3000)
    }, 'Warning Toast'),
    Button({ 
      class: 'btn btn-error',
      onclick: () => Toast('An error occurred', 'alert-error', 3000)
    }, 'Error Toast')
  ]);
};
$mount(BasicDemo, '#demo-basic');

Different Durations

Live Demo

const DurationDemo = () => {
  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Short (1s)', 'alert-info', 1000)
    }, '1 Second'),
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Normal (3s)', 'alert-success', 3000)
    }, '3 Seconds'),
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Long (5s)', 'alert-warning', 5000)
    }, '5 Seconds'),
    Button({ 
      class: 'btn btn-sm',
      onclick: () => Toast('Very Long (8s)', 'alert-error', 8000)
    }, '8 Seconds')
  ]);
};
$mount(DurationDemo, '#demo-duration');

Interactive Toast

Live Demo

const InteractiveDemo = () => {
  const count = $(0);
  
  const showRandomToast = () => {
    const types = ['alert-info', 'alert-success', 'alert-warning', 'alert-error'];
    const messages = [
      'You clicked the button!',
      'Action completed successfully',
      'Processing your request...',
      'Something interesting happened'
    ];
    const randomType = types[Math.floor(Math.random() * types.length)];
    const randomMessage = messages[Math.floor(Math.random() * messages.length)];
    count(count() + 1);
    Toast(`${randomMessage} (${count()})`, randomType, 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4 items-center' }, [
    Button({ 
      class: 'btn btn-primary',
      onclick: showRandomToast
    }, 'Show Random Toast'),
    Div({ class: 'text-sm opacity-70' }, () => `Toasts shown: ${count()}`)
  ]);
};
$mount(InteractiveDemo, '#demo-interactive');

Form Validation Toast

Live Demo

const FormToastDemo = () => {
  const email = $('');
  const password = $('');
  
  const handleSubmit = () => {
    if (!email()) {
      Toast('Please enter your email', 'alert-warning', 3000);
      return;
    }
    if (!email().includes('@')) {
      Toast('Please enter a valid email address', 'alert-error', 3000);
      return;
    }
    if (!password()) {
      Toast('Please enter your password', 'alert-warning', 3000);
      return;
    }
    if (password().length < 6) {
      Toast('Password must be at least 6 characters', 'alert-error', 3000);
      return;
    }
    Toast('Login successful! Redirecting...', 'alert-success', 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4 max-w-md mx-auto' }, [
    Div({ class: 'text-lg font-bold text-center' }, 'Login Form'),
    Input({
      label: 'Email',
      type: 'email',
      value: email,
      placeholder: 'user@example.com',
      oninput: (e) => email(e.target.value)
    }),
    Input({
      label: 'Password',
      type: 'password',
      value: password,
      placeholder: 'Enter password',
      oninput: (e) => password(e.target.value)
    }),
    Button({ 
      class: 'btn btn-primary',
      onclick: handleSubmit
    }, 'Login')
  ]);
};
$mount(FormToastDemo, '#demo-form');

Success Feedback

Live Demo

const FeedbackDemo = () => {
  const items = $([
    { id: 1, name: 'Item 1', saved: false },
    { id: 2, name: 'Item 2', saved: false },
    { id: 3, name: 'Item 3', saved: false }
  ]);
  
  const saveItem = (id) => {
    items(items().map(item => 
      item.id === id ? { ...item, saved: true } : item
    ));
    Toast(`Item ${id} saved successfully!`, 'alert-success', 2000);
  };
  
  const saveAll = () => {
    items(items().map(item => ({ ...item, saved: true })));
    Toast('All items saved!', 'alert-success', 2000);
  };
  
  return Div({ class: 'flex flex-col gap-4' }, [
    Div({ class: 'flex justify-between items-center' }, [
      Span({ class: 'font-bold' }, 'Items to Save'),
      Button({ 
        class: 'btn btn-sm btn-primary',
        onclick: saveAll
      }, 'Save All')
    ]),
    Div({ class: 'flex flex-col gap-2' }, items().map(item =>
      Div({ class: 'flex justify-between items-center p-3 bg-base-200 rounded-lg' }, [
        Span({}, item.name),
        item.saved 
          ? Span({ class: 'badge badge-success' }, '✓ Saved')
          : Button({ 
              class: 'btn btn-xs btn-primary',
              onclick: () => saveItem(item.id)
            }, 'Save')
      ])
    ))
  ]);
};
$mount(FeedbackDemo, '#demo-feedback');

Error Handling

Live Demo

const ErrorDemo = () => {
  const simulateApiCall = () => {
    const success = Math.random() > 0.3;
    
    if (success) {
      Toast('Data loaded successfully!', 'alert-success', 2000);
    } else {
      Toast('Failed to load data. Please try again.', 'alert-error', 3000);
    }
  };
  
  const simulateNetworkError = () => {
    Toast('Network error: Unable to connect to server', 'alert-error', 4000);
  };
  
  const simulateTimeout = () => {
    Toast('Request timeout (5s). Please check your connection.', 'alert-warning', 4000);
  };
  
  return Div({ class: 'flex flex-wrap gap-3 justify-center' }, [
    Button({ 
      class: 'btn btn-primary',
      onclick: simulateApiCall
    }, 'Simulate API Call'),
    Button({ 
      class: 'btn btn-error',
      onclick: simulateNetworkError
    }, 'Network Error'),
    Button({ 
      class: 'btn btn-warning',
      onclick: simulateTimeout
    }, 'Timeout')
  ]);
};
$mount(ErrorDemo, '#demo-error');

Custom Messages

Live Demo

const CustomDemo = () => {
  const showCustomToast = (type, message) => {
    Toast(message, type, 3000);
  };
  
  return Div({ class: 'flex flex-wrap gap-2 justify-center' }, [
    Button({ 
      class: 'btn btn-info',
      onclick: () => showCustomToast('alert-info', '📧 New email received from john@example.com')
    }, 'Email'),
    Button({ 
      class: 'btn btn-success',
      onclick: () => showCustomToast('alert-success', '💰 Payment of $49.99 completed')
    }, 'Payment'),
    Button({ 
      class: 'btn btn-warning',
      onclick: () => showCustomToast('alert-warning', '⚠️ Your session will expire in 5 minutes')
    }, 'Session Warning'),
    Button({ 
      class: 'btn btn-error',
      onclick: () => showCustomToast('alert-error', '🔒 Failed login attempt detected')
    }, 'Security Alert')
  ]);
};
$mount(CustomDemo, '#demo-custom');

Multiple Toasts

Live Demo

const MultipleDemo = () => {
  const showMultipleToasts = () => {
    Toast('First message', 'alert-info', 3000);
    setTimeout(() => Toast('Second message', 'alert-success', 3000), 500);
    setTimeout(() => Toast('Third message', 'alert-warning', 3000), 1000);
    setTimeout(() => Toast('Fourth message', 'alert-error', 3000), 1500);
  };
  
  return Div({ class: 'flex justify-center' }, [
    Button({ 
      class: 'btn btn-primary',
      onclick: showMultipleToasts
    }, 'Show Multiple Toasts')
  ]);
};
$mount(MultipleDemo, '#demo-multiple');