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 toastspa-toast-container--top-right- Top right positionpa-toast-container--top-left- Top left positionpa-toast-container--top-center- Top center positionpa-toast-container--bottom-right- Bottom right positionpa-toast-container--bottom-left- Bottom left positionpa-toast-container--bottom-center- Bottom center position
Toast Item
pa-toast- Base toast elementpa-toast--show- Visible/animating inpa-toast--hide- Animating outpa-toast__icon- Icon containerpa-toast__content- Content wrapperpa-toast__title- Toast titlepa-toast__message- Toast message textpa-toast__close- Close/dismiss buttonpa-toast__progress- Auto-dismiss progress bar
Toast Variants
pa-toast--primary- Primary/accent colorpa-toast--success- Success (green)pa-toast--danger- Danger/error (red)pa-toast--warning- Warning (yellow/orange)pa-toast--info- Information (blue)