Toast

Toasts display brief, non-blocking notifications to provide feedback about operations.

Import​

<script>
  import { ToastContainer, toastStore } from '@classic-homes/theme-svelte';
</script>

Setup​

Add ToastContainer to your root layout (once per app):

<!-- +layout.svelte -->
<script>
  import { ToastContainer } from '@classic-homes/theme-svelte';
</script>

<slot />
<ToastContainer />

Basic Usage​

Use the toastStore to show toasts:

<script>
  import { toastStore } from '@classic-homes/theme-svelte';
</script>

<Button onclick={() => toastStore.success('Operation completed!')}>Show Toast</Button>

Toast Methods​

Success​

For successful operations:

toastStore.success('Changes saved successfully!');

Error​

For errors and failures:

toastStore.error('Failed to save changes. Please try again.');

Warning​

For warnings and cautions:

toastStore.warning('Your session will expire in 5 minutes.');

Info​

For informational messages:

toastStore.info('New version available. Refresh to update.');

Custom​

For custom styled toasts:

toastStore.show({
  message: 'Custom message',
  type: 'success',
  duration: 5000,
});

Toast Options​

Option	Type	Default	Description
message	string	Required	Toast message text
type	'success' | 'error' | 'warning' | 'info'	-	Toast type for styling
duration	number	5000	Auto-dismiss time in ms
dismissible	boolean	true	Whether user can dismiss

Component Props​

ToastContainer (included in AppShell) renders a Toast for each queued toast. Render Toast yourself only when building a custom container.

Prop	Type	Default	Description
message	string	required	Toast message text
type	'success' | 'error' | 'warning' | 'info'	'info'	Toast type for styling
title	string	-	Bold title above the message
onclose	() => void	-	Called by the dismiss button
action	Snippet	-	Action content shown in the toast
class	string	-	Additional classes

Duration​

Control how long toasts stay visible:

// Quick toast (3 seconds)
toastStore.success('Saved!', { duration: 3000 });

// Longer toast (10 seconds)
toastStore.info('Please review the changes carefully.', { duration: 10000 });

// Persistent toast (no auto-dismiss)
toastStore.warning('Action required', { duration: Infinity });

Accessibility​

The Toast component includes:

• role="alert" for screen reader announcements
• Appropriate aria-live regions
• Focus management for dismiss buttons
• Color contrast compliance

Examples​

Form Submission​

<script>
  async function handleSubmit() {
    try {
      await saveForm();
      toastStore.success('Form submitted successfully!');
    } catch (error) {
      toastStore.error('Failed to submit form. Please try again.');
    }
  }
</script>

Action with Undo​

<script>
  function handleDelete(item) {
    deleteItem(item.id);
    toastStore.show({
      message: `"${item.name}" deleted`,
      type: 'info',
      action: {
        label: 'Undo',
        onClick: () => restoreItem(item),
      },
    });
  }
</script>

Network Status​

<script>
  $effect(() => {
    if (!navigator.onLine) {
      toastStore.warning('You are offline. Changes will sync when connected.');
    } else {
      toastStore.success('Back online!');
    }
  });
</script>

Async Operation​

<script>
  async function handleExport() {
    toastStore.info('Starting export...');
    try {
      await exportData();
      toastStore.success('Export completed! Check your downloads.');
    } catch {
      toastStore.error('Export failed. Please try again.');
    }
  }
</script>

Copy to Clipboard​

<script>
  async function copyLink() {
    await navigator.clipboard.writeText(shareUrl);
    toastStore.success('Link copied to clipboard!');
  }
</script>

<Button onclick={copyLink}>Copy Link</Button>

Multiple Toasts​

Multiple toasts stack and are dismissed independently:

<Button
  onclick={() => {
    toastStore.success('First message');
    toastStore.info('Second message');
    toastStore.warning('Third message');
  }}
>
  Show Multiple
</Button>

Best Practices​

• Keep messages brief and actionable
• Use appropriate types for context
• Don't overuse toasts for every action
• Consider inline feedback for form validation
• Use longer durations for important messages

Related Components​

• Alert - For persistent, inline messages
• Dialog - For important confirmations