Toast

Toast Component

Notification toasts with auto-dismiss, stacking, and swipe-to-close. Supports success, error, warning, and info variants.

Import

import { Toast } from '@covers/ui';

Usage

import { toast, Toaster } from '@covers/ui';

// Add Toaster to your layout
<Toaster />

// Success
toast.success('Changes saved successfully');

// Error
toast.error('Failed to save changes');

// Warning
toast.warning('API rate limit approaching');

// Info
toast.info('New version available');

// Custom duration (ms)
toast.success('Uploaded!', { duration: 5000 });

// With action
toast('File deleted', {
  action: {
    label: 'Undo',
    onClick: () => restoreFile(),
  },
});

// With close callback
toast.info('Session expiring', {
  onClose: () => refreshToken(),
});

Props

Name	Type	Description
variant	"success" \| "error" \| "warning" \| "info"	Visual style and icon of the toast
duration	number	Auto-dismiss delay in milliseconds (default 4000)
onClose	() => void	Callback when toast is dismissed

Default Styling

bg-slate-900 border border-slate-700 rounded-lg shadow-lg px-4 py-3

Part of CoverKit

This component is part of CoverKit (@covers/ui), a dark-first React component library.

View on GitHub →View on npm →