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

View Source

Phoenix implementation of Zag.js Toast.

Compatible with Phoenix Flash messages

Examples

Toast components is meant to be a replacement for the Core Components and Layout flash group and flash components.

In your Layout App, you can replace the flash group <.flash_group flash={@flash} /> components by the toast group

  <.toast_group id="layout-toast" flash={@flash} class="toast">
    <:loading>
      <.heroicon name="hero-arrow-path" />
    </:loading>
  </.toast_group>

API Control

Client-side

<button phx-click={Corex.Toast.create_toast("layout-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("layout-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, "layout-toast", "This is an info toast", "This is an info toast description", :info, 5000)}
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
id="layout-toast"
class="toast"
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"] {}
[data-scope="toast"][data-part="root"] {}
[data-scope="toast"][data-part="title"] {}
[data-scope="toast"][data-part="description"] {}
[data-scope="toast"][data-part="close-trigger"] {}

If you wish to use the default Corex styling, you can use the class toast on the component. This requires to install Mix.Tasks.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";

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(toast_group_id, title, description, type, opts)

Creates a toast notification programmatically (client-side).

push_toast(socket, toast_group_id, title, description, type, duration)

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
  toast_group_id="layout-toast"
  title="We can't find the internet"
  description="Attempting to reconnect"
  type={:loading}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "client-error-toast".
  • toast_group_id (:string) (required)
  • 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
  toast_group_id="layout-toast"
  title="Connection restored"
  description="You're back online"
  type={:success}
/>

Attributes

  • id (:string) - Defaults to "connected-toast".
  • toast_group_id (:string) (required)
  • 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
  toast_group_id="layout-toast"
  title="Connection lost"
  description="Attempting to reconnect"
  type={:warning}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "disconnected-toast".
  • toast_group_id (:string) (required)
  • 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 id="layout-toast" class="toast" flash={@flash}>
  <:loading>
    <.heroicon name="hero-arrow-path" />
  </:loading>
</.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
id="layout-toast"
class="toast"
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) (required) - The id of the toast group.
  • placement (:string) - Where toasts appear on screen. Defaults to "bottom-end". Must be one of "top-start", "top", "top-end", "bottom-start", "bottom", or "bottom-end".
  • overlap (:boolean) - Whether toasts can overlap. Defaults to true.
  • max (:integer) - Maximum number of visible toasts. Defaults to 5.
  • gap (:integer) - Gap between toasts in pixels. Defaults to nil.
  • offset (:string) - Offset from viewport edge. Defaults to nil.
  • pause_on_page_idle (:boolean) - Pause duration when page is idle. 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).
  • translation (Corex.Toast.Translation) - Override default titles for info/error flash messages. Defaults to nil.
  • Global attributes are accepted.

Slots

  • loading - the loading spinner icon to display when duration is infinity. Accepts attributes:
    • class (:string)

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
  toast_group_id="layout-toast"
  title="Something went wrong!"
  description="Attempting to reconnect"
  type={:error}
  duration={:infinity}
/>

Attributes

  • id (:string) - Defaults to "server-error-toast".
  • toast_group_id (:string) (required)
  • 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(toast_group_id, title, description, type, opts)

Creates a toast notification programmatically (client-side).

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

Examples

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

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

push_toast(socket, toast_group_id, title, description, type, duration)

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
  {:noreply, Corex.Toast.push_toast(socket, "layout-toast", "Saved!", "Your changes have been saved.", :success, 5000)}
end