Standard

Filled

Custom progress color

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

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

Toasts with action buttons separated by a horizontal rule. Clicking an action dismisses the toast.

Toasts automatically stack vertically in the container

Filled

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)
• pa-toast--color-{1-9} - Theme color slots
• pa-toast--filled-primary - Filled primary
• pa-toast--filled-success - Filled success
• pa-toast--filled-danger - Filled danger
• pa-toast--filled-warning - Filled warning
• pa-toast--filled-info - Filled info
• pa-toast--filled-color-{1-9} - Filled theme color slots