Toast

Toast component for displaying temporary notifications that appear at fixed positions on the screen.

Basic Toast

Toasts are fixed position notifications. Here are examples of different variants:

Operation successful!

Something went wrong

Information message

Warning message


          <.toast variant={:success}>Operation successful!</.toast>
          <.toast variant={:error}>Something went wrong</.toast>
          <.toast variant={:info}>Information message</.toast>
          <.toast variant={:warning}>Warning message</.toast>

Positions

Toasts can be positioned at different locations on the screen:

Top Start

Top Center

Bottom End


          <.toast variant={:info} position={:top_start}>Top Start</.toast>
          <.toast variant={:info} position={:top_center}>Top Center</.toast>
          <.toast variant={:info} position={:top_end}>Top End</.toast>
          <.toast variant={:info} position={:bottom_start}>Bottom Start</.toast>
          <.toast variant={:info} position={:bottom_center}>Bottom Center</.toast>
          <.toast variant={:info} position={:bottom_end}>Bottom End</.toast>

Auto-Dismiss

Toasts can automatically dismiss after a specified duration:

This toast will auto-dismiss in 3 seconds

This toast won't auto-dismiss (duration=0)


          <.toast variant={:success} duration={3000}>Auto-dismiss in 3 seconds</.toast>
          <.toast variant={:info} duration={0}>No auto-dismiss</.toast>

Non-Dismissible

Toasts can be made non-dismissible by setting dismissible=false:

This toast cannot be dismissed manually


          <.toast variant={:warning} dismissible={false}>Non-dismissible toast</.toast>

With LiveView

Toasts work seamlessly with LiveView. You can show/hide them using JS commands:


          # In your LiveView
          def handle_event("show-success", _params, socket) do
            {:noreply, socket}
          end

          # In your template
          <button phx-click="show-success" phx-click-js={JS.show(to: "#toast-success", transition: "fade-in-scale")}>
            Show Success Toast
          </button>

          <.toast id="toast-success" variant={:success}>
            Operation completed successfully!
          </.toast>

Props

Prop	Type	Default	Description
id	string	auto-generated	Unique ID for the toast (required for JS.show/hide)
variant	:info \| :success \| :warning \| :error	:info	Visual variant of the toast
position	:top_start \| :top_center \| :top_end \| :middle_start \| :middle_center \| :middle_end \| :bottom_start \| :bottom_center \| :bottom_end	:top_end	Position of the toast on the screen
dismissible	boolean	true	Show close button to manually dismiss
duration	integer	5000	Auto-dismiss duration in milliseconds (0 to disable)
class	string	""	Additional CSS classes