Toast Types
Rich Content
Positions
Click any button to change the toast position
Theme
Click to toggle between light and dark themes, or enable/disable rich colors. System follows the page theme, or your OS setting when the page sets none.
Expanded
Shows every toast in a list instead of a stack that expands on hover
Connection Toasts
With connection_toasts on, a toast shows while LiveView is reconnecting. Dropping the connection reconnects after 3 seconds. Crashing the server restarts this LiveView, which resets the settings on this page.
Toast After Navigation
The toast is created on this page, then you're taken to the gallery. It survives the page change and shows there, like a "Saved" message after a form redirects.
Update Toast
Creates a toast then updates it twice within 3 seconds
Async Operations
Shows loading state, then transitions to success/error
Custom Duration
Animation Speed
Change the animation speed for all toasts
HTML Content
⚠️ HTML content must be wrapped with Phoenix.HTML.raw() - only use with trusted content!
Regular Flash Messages
These use regular Phoenix flash messages via put_flash()