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-end - Top end position (right in LTR, left in RTL)
  • pa-toast-container--top-start - Top start position (left in LTR, right in RTL)
  • pa-toast-container--top-center - Top center position
  • pa-toast-container--bottom-end - Bottom end position (right in LTR, left in RTL)
  • pa-toast-container--bottom-start - Bottom start position (left in LTR, right in RTL)
  • 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

Body text size. All elements scale proportionally.
๐Ÿ‘ค

John Doe

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