Toast
Toast notifications with colored accent indicators for different message types.
Notification
This is a default notification.
Success
Operation completed successfully.
Error
Something went wrong. Please try again.
Warning
This action cannot be undone.
Info
A new version is available.
<.toast id="my-toast" variant="success">
<.toast_title>Success</.toast_title>
<.toast_description>Operation completed.</.toast_description>
</.toast>
Toasts can include an action area with buttons or other interactive elements.
New tip available
Did you know you can use /help to see all commands?
Unsaved changes
You have unsaved changes that will be lost.
<.toast id="my-toast" variant="info">
<.toast_title>New tip</.toast_title>
<.toast_description>Use /help for commands.</.toast_description>
<.toast_action>
<.button variant="outline" size="sm">
<:icon><span class="w-4 h-4" /></:icon>
Got it
</.button>
</.toast_action>
</.toast>
Toasts without the close button for persistent notifications.
Connection lost
Attempting to reconnect...
<.toast id="my-toast" variant="error" dismissible=false>
<.toast_title>Connection lost</.toast_title>
<.toast_description>Reconnecting...</.toast_description>
</.toast>
Click buttons to show/dismiss toasts in the bottom-right corner.
<.toast_container position="bottom-right">
<.toast id="live-toast" variant="success">
<.toast_title>Saved!</.toast_title>
<.toast_description>Changes saved.</.toast_description>
</.toast>
</.toast_container>
Toast containers can be positioned in any corner of the viewport.
position="top-right" — Top right corner
position="top-left" — Top left corner
position="bottom-right" — Bottom right (default)
position="bottom-left" — Bottom left corner
<.toast_container position="bottom-right">
<!-- toasts stack here -->
</.toast_container>
