Toast Component

The Toast component delivers brief, non-intrusive notifications that automatically appear and disappear. Perfect for providing feedback on user actions, displaying system status, or communicating important updates without disrupting the user experience.

Key Features

• Multiple Positions: Four strategic placement options

• Message Variants: Success and error states

• Auto-dismiss: Configurable display duration

• Accessible: Screen reader and keyboard support

Quick Start

Add the Toast component to your layout and trigger it programmatically:

1
<Toast id="my-toast" position="bottomRight" />

1
// Show a success message
2
const toast = await Ready(document.querySelector<ToastElement>('#my-toast'));
3
toast.show({
4
  message: 'Changes saved successfully!',
5
  variant: 'success',
6
  duration: 3000,
7
});

Toast Component Props API

Toast Functions API

1
interface ToastData {
2
  show: ({ message, duration, variant }: { message: string; duration?: number; variant?: 'success' | 'error' }) => void;
3
  hide: () => void;
4
}

Best Practices

1. Message Content

   • Keep messages brief and clear
   • Use appropriate variants for context
   • Include specific details when helpful
   • Avoid technical jargon

2. Timing and Display

   • Set appropriate duration for message length
   • Limit simultaneous toasts
   • Position consistently throughout app
   • Consider mobile viewports

3. Accessibility

   • Use ARIA live regions
   • Ensure keyboard accessibility
   • Provide sufficient contrast
   • Allow manual dismissal

Common Use Cases