Corex.Toast (Corex v0.1.0-alpha.23)

View Source

Phoenix implementation of Zag.js Toast.

Examples

You can add the toast group to each pages and or your App layout

 <.toast_group/>

API Control

Client-side

<button phx-click={Corex.Toast.create_toast("This is an info toast", "This is an info toast description", :info)} class="button">
 Create Info Toast
</button>

<div phx-disconnected={Corex.Toast.create_toast("We can't find the internet", "Attempting to reconnect", :loading, duration: :infinity)}></div>

Server-side

def handle_event("create_info_toast", _, socket) do
  {:noreply, Corex.Toast.push_toast(socket, "This is an info toast", "This is an info toast description", :info)}
end

Flash Messages

You can use the flash attribute to display flash messages as toasts. You can use %Corex.Flash.Info{}' and%Corex.Flash.Error{}' to configure the flash messages title, type and duration. The descritpion will come from the Phoenix flash message

<.toast_group
flash={@flash}
flash_info={%Corex.Flash.Info{title: "Success", type: :success, duration: 5000}}
flash_error={%Corex.Flash.Error{title: "Error", type: :error, duration: :infinity}}/>

Styling

Use data attributes to target elements:

  • [data-scope="toast"][data-part="group"] - Toast container
  • [data-scope="toast"][data-part="root"] - Individual toast root
  • [data-scope="toast"][data-part="title"] - Toast title
  • [data-scope="toast"][data-part="description"] - Toast description
  • [data-scope="toast"][data-part="close-trigger"] - Close button

If you wish to use the default Corex styling, you can use the class toast on the component. This requires to install mix corex.design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/toast.css";

You can then use modifiers

<.toast_group class="toast toast--accent">

Learn more about modifiers and Corex Design

Summary

Components

toast_client_error(assigns)

Renders a div that creates a toast notification when a client error occurs.

toast_connected(assigns)

Renders a div that creates a toast notification when the connection is restored.

toast_disconnected(assigns)

Renders a div that creates a toast notification when the connection is lost.

toast_group(assigns)

Renders a toast group (toaster) that manages multiple toast notifications.

toast_server_error(assigns)

Renders a div that creates a toast notification when a server error occurs.

API

create_toast(title, description \\ nil, type \\ :info, opts \\ [])

Creates a toast notification programmatically (client-side).

push_toast(socket, title, description \\ nil, type \\ :info, duration \\ 5000)

Server-side function to push a toast event to the client.

Components

toast_client_error(assigns)

Renders a div that creates a toast notification when a client error occurs.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects a client-side connection error.

Examples

<.toast_client_error
  title="We can't find the internet"
  description="Attempting to reconnect"
  type={:loading}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "client-error-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :info. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to :infinity.

toast_connected(assigns)

Renders a div that creates a toast notification when the connection is restored.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects that the connection has been restored.

Examples

<.toast_connected
  title="Connection restored"
  description="You're back online"
  type={:success}
/>

Attributes

  • id (:string) - Defaults to "connected-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :success. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to 5000.

toast_disconnected(assigns)

Renders a div that creates a toast notification when the connection is lost.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects that the connection has been lost.

Examples

<.toast_disconnected
  title="Connection lost"
  description="Attempting to reconnect"
  type={:warning}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "disconnected-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :info. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to :infinity.

toast_group(assigns)

Renders a toast group (toaster) that manages multiple toast notifications.

This component should be rendered once in your layout.

Examples

 <.toast_group />

Flash Messages

You can use the flash attribute to display flash messages as toasts. You can use %Corex.Flash.Info{}' and%Corex.Flash.Error{}' to configure the flash messages title, type and duration. The descritpion will come from the Phoenix flash message

<.toast_group
flash={@flash}
flash_info={%Corex.Flash.Info{title: "Success", type: :success, duration: 5000}}
flash_error={%Corex.Flash.Error{title: "Error", type: :error, duration: :infinity}}/>

Attributes

  • id (:string) - Defaults to nil.
  • placement (:string) - Defaults to "bottom-end". Must be one of "top-start", "top", "top-end", "bottom-start", "bottom", or "bottom-end".
  • overlap (:boolean) - Defaults to true.
  • max (:integer) - Defaults to 5.
  • gap (:integer) - Defaults to nil.
  • offset (:string) - Defaults to nil.
  • pause_on_page_idle (:boolean) - Defaults to false.
  • flash (:map) - the map of flash messages to display as toasts. Defaults to %{}.
  • flash_info (Corex.Flash.Info) - configuration for info flash messages (Corex.Flash.Info struct).
  • flash_error (Corex.Flash.Error) - configuration for error flash messages (Corex.Flash.Error struct).

Slots

  • loading (required) - the loading spinner icon to display when duration is infinity.

toast_server_error(assigns)

Renders a div that creates a toast notification when a server error occurs.

This component should be placed in your layout and will automatically create a toast when Phoenix LiveView detects a server-side connection error.

Examples

<.toast_server_error
  title="Something went wrong!"
  description="Attempting to reconnect"
  type={:error}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "server-error-toast".
  • title (:string) (required)
  • description (:string) - Defaults to nil.
  • type (:atom) - Defaults to :error. Must be one of :info, :success, or :error.
  • duration (:any) - Defaults to :infinity.

API

create_toast(title, description \\ nil, type \\ :info, opts \\ [])

Creates a toast notification programmatically (client-side).

This function returns a JS command that can be used in event handlers.

Examples

def handle_event("save", _params, socket) do
  # ... save logic ...
  {:noreply, push_event(socket, "toast-create", %{
    title: "Saved!",
    description: "Your changes have been saved.",
    type: "success"
  })}
end

Or use the JS command version:

<button phx-click={Corex.Toast.create("Saved!", "Your changes have been saved.", :success)}>
  Save
</button>

<button phx-click={Corex.Toast.create("Loading...", nil, :loading, duration: :infinity)}>
  Show Loading
</button>

push_toast(socket, title, description \\ nil, type \\ :info, duration \\ 5000)

Server-side function to push a toast event to the client.

Use this in your LiveView event handlers.

Examples

def handle_event("save", _params, socket) do
  # ... save logic ...
  {:noreply, push_toast(socket, "Saved!", "Your changes have been saved.", :success)}
end