Toast

A notification system for showing brief messages with auto-dismiss and stacking.

Setup

Toast requires a context provider in your root layout and the Toast component to render notifications.

Usage

Toast Types

ℹ Info - Neutral information
✓ Success - Action completed
⚠ Warning - Attention needed
✕ Error - Something failed

ToastController API

Methods

PropTypeDefaultDescription
show(options) string-Show a toast, returns toast ID
info(message, options?) string-Show info toast
success(message, options?) string-Show success toast
warning(message, options?) string-Show warning toast
error(message, options?) string-Show error toast
dismiss(id) void-Dismiss a specific toast
dismissAll() void-Dismiss all toasts
pause(id) void-Pause auto-dismiss timer
resume(id) void-Resume auto-dismiss timer

Toast Options

PropTypeDefaultDescription
message *string-Toast message content
type 'info' | 'success' | 'warning' | 'error''info'Toast type/color
title string-Optional title above message
duration number4000Auto-dismiss delay in ms (0 to disable)

Positioning

top-left
top-center
top-right
bottom-left
bottom-center
bottom-right

Dismissing Toasts

Features

  • Auto-dismiss - Toasts disappear after duration (default 4s)
  • Pause on hover - Timer pauses when mouse enters toast
  • Stacking - Multiple toasts stack with max limit (default 5)
  • Portal rendering - Toasts render at document body level
  • Animations - Smooth enter/exit transitions
  • Accessibility - Uses role="alert" and aria-live

Configuration