Toast

The Toast component provides non-blocking notifications that appear temporarily to inform users of actions, events, or status changes. Toasts automatically dismiss and can include actions.

Add the Toaster component once at your app's root to enable toasts throughout your application.

Features

Multiple toast types (success, error, warning, info, loading)
Action buttons and cancel buttons
Promise-based toasts for async operations
Stacked display with expand-on-hover
Swipe to dismiss
Keyboard shortcut support
Customizable duration
Custom icons

Usage

import { Toaster, toast } from '@loke/design-system/toast';

// Add Toaster to your app root
function App() {
  return (
    <>
      <YourApp />
      <Toaster />
    </>
  );
}

// Trigger toasts anywhere
function MyComponent() {
  return (
    <Button onClick={() => toast('Hello World!')}>
      Show Toast
    </Button>
  );
}

Tips:

Place Toaster at your app root.
Use toast.success(), toast.error(), etc. for styled variants.
Use toast.promise() for async operations.

Toast API

Basic toast

toast('Event has been created');

// With description
toast('Event created', {
  description: 'Your event has been added to the calendar.',
});

Typed toasts

toast.success('Successfully saved!');
toast.error('Something went wrong');
toast.warning('Please review your input');
toast.info('New features available');
toast.loading('Loading...');

With actions

toast('File uploaded', {
  action: {
    label: 'Undo',
    onClick: () => console.log('Undo'),
  },
});

Promise toast

toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Data saved!',
  error: 'Could not save data.',
});

Dismiss toast

const toastId = toast('Message');
toast.dismiss(toastId); // Dismiss specific toast
toast.dismiss(); // Dismiss all toasts

Props

Toaster

Prop

Type

Toast options

Prop

Type

Examples

Basic toasts

<Button onClick={() => toast('Event has been created')}>
  Show Toast
</Button>

Toast types

<Button onClick={() => toast.success('Successfully saved!')}>
  Success
</Button>
<Button onClick={() => toast.error('Something went wrong')}>
  Error
</Button>
<Button onClick={() => toast.warning('Review your input')}>
  Warning
</Button>
<Button onClick={() => toast.info('New features available')}>
  Info
</Button>

With action

<Button
  onClick={() =>
    toast('Event created', {
      description: 'Your event has been added.',
      action: {
        label: 'Undo',
        onClick: () => console.log('Undo'),
      },
    })
  }
>
  With Action
</Button>

Promise toast

<Button
  onClick={() => {
    const promise = new Promise((resolve) =>
      setTimeout(resolve, 2000)
    );
    toast.promise(promise, {
      loading: 'Saving...',
      success: 'Settings saved!',
      error: 'Failed to save settings.',
    });
  }}
>
  Save Settings
</Button>

Accessibility

Uses aria-live="polite" for non-intrusive announcements.
Toast container has role="region" with accessible label.
Keyboard shortcut (Alt+T by default) focuses the toast list.
Close buttons have accessible labels.
Toasts can be dismissed with Escape key.
Action buttons are focusable and keyboard accessible.

Best practices

Keep toast messages brief and actionable.
Use appropriate toast types for the message context.
Avoid showing too many toasts at once.
Set reasonable durations (longer for important messages).
Provide undo actions when appropriate.
Don't use toasts for critical information that requires attention.
Use promise toasts for async operations to show loading state.
Test toast behavior on mobile (swipe to dismiss).

Toast

On this page