Skua.Components.Toast (Skua v0.1.0)

Copy Markdown View Source

Toasts — two complementary mechanisms:

  • flash_group/1 renders Phoenix @flash (one message per kind) as toasts. Mirrors the core_components API so it's a drop-in after --strip-daisy.

  • toaster/1 + toast/4 give a stacking toast region: the server pushes toasts and the client stacks many at once, each with its own timer. Use this when more than one toast can appear (validation errors, async results).

    # in your LiveView
    def handle_event("save", _, socket) do
      {:noreply, Skua.Components.Toast.toast(socket, :success, "Saved!")}
    end
    
    # in your layout / page, once
    <.toaster />

Summary

Functions

JS that hides the toast and clears the server flash for kind.

Default auto-dismiss duration (ms) by kind — longer for more severe messages so they aren't yanked away before they're read.

A single flash toast. Reads its message from @flash by kind, or renders the given inner block. kind maps to a visual variant.

Renders Phoenix @flash as toasts (info/success/warning/error), stacked in a fixed top-layer container.

Pushes a toast to the client toaster/1. Returns the socket.

A stacking toast region. Place once; the server pushes toasts into it with toast/4. Many toasts can be visible at once (newest on top, oldest dropped past :max).

Functions

dismiss(id, kind)

JS that hides the toast and clears the server flash for kind.

duration(_)

Default auto-dismiss duration (ms) by kind — longer for more severe messages so they aren't yanked away before they're read.

error 10s · warning 8s · info 6s · success 4s

flash(assigns)

A single flash toast. Reads its message from @flash by kind, or renders the given inner block. kind maps to a visual variant.

Attributes

  • flash (:map) - Defaults to %{}.
  • kind (:atom) - Defaults to :info. Must be one of :info, :error, :success, or :warning.
  • id (:string) - Defaults to nil.
  • title (:string) - Defaults to nil.
  • autodismiss (:integer) - ms before auto-dismiss; 0 disables. Defaults by kind (see duration/1). Defaults to nil.

Slots

  • inner_block

flash_group(assigns)

Renders Phoenix @flash as toasts (info/success/warning/error), stacked in a fixed top-layer container.

Attributes

  • flash (:map) (required) - the @flash assign.
  • id (:string) - Defaults to "flash-group".

toast(socket, kind, message, opts \\ [])

Pushes a toast to the client toaster/1. Returns the socket.

Skua.Components.Toast.toast(socket, :error, "That didn't work", title: "Heads up")

kind is :info | :success | :warning | :error. Opts: :title, :duration (ms; defaults by severity — error 10s, warning 8s, info 6s, success 4s).

toaster(assigns)

A stacking toast region. Place once; the server pushes toasts into it with toast/4. Many toasts can be visible at once (newest on top, oldest dropped past :max).

Attributes

  • id (:string) - Defaults to "skua-toaster".
  • max (:integer) - Defaults to 5.