Temporary notification messages that auto-dismiss with smooth animations.

Toast Positions

Toast Variants

Toast with Progress Bar

Progress bar shows time remaining before auto-dismiss (5 seconds)

Persistent Toasts (Manual Dismiss Only)

These toasts stay visible until manually dismissed by clicking the close button

Action Toasts

Multiple Toasts (Stacking)

Toasts automatically stack vertically in the container

CSS Classes Reference

Toast Container

  • pa-toast-container - Fixed container for toasts
  • pa-toast-container--top-right - Top right position
  • pa-toast-container--top-left - Top left position
  • pa-toast-container--top-center - Top center position
  • pa-toast-container--bottom-right - Bottom right position
  • pa-toast-container--bottom-left - Bottom left position
  • pa-toast-container--bottom-center - Bottom center position

Toast Item

  • pa-toast - Base toast element
  • pa-toast--show - Visible/animating in
  • pa-toast--hide - Animating out
  • pa-toast__icon - Icon container
  • pa-toast__content - Content wrapper
  • pa-toast__title - Toast title
  • pa-toast__message - Toast message text
  • pa-toast__close - Close/dismiss button
  • pa-toast__progress - Auto-dismiss progress bar

Toast Variants

  • pa-toast--primary - Primary/accent color
  • pa-toast--success - Success (green)
  • pa-toast--danger - Danger/error (red)
  • pa-toast--warning - Warning (yellow/orange)
  • pa-toast--info - Information (blue)
Type to search or use /p for products, /o for orders, /u for users, /i for invoices

Settings

๐Ÿ‘ค

John Doe

Administrator
  • ๐Ÿ“Š Dashboard
  • ๐Ÿ“ Forms
  • ๐Ÿ“‹ Tables
  • ๐Ÿ“Š Data Grid