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-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 positionpa-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 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)