PureAdmin.Components.Flash (PureAdmin v1.1.0)

Copy Markdown View Source

Flash message components for Pure Admin.

Provides two approaches:

Standard Phoenix flash (single @flash map)

Drop-in replacements for CoreComponents — works with put_flash/3:

<.flash_group flash={@flash} />
<.flash kind={:info} flash={@flash} />

Independent flash containers (multiple per page)

For forms/cards that need their own flash messages, use flash_container/1 with the PureAdminFlash JS hook and push_flash/5:

<!-- In your template -->
<.card title_text="Contact Form">
  <.flash_container id="contact-form" />
  <.simple_form phx-submit="save-contact">...</.simple_form>
</.card>

<.card title_text="Profile">
  <.flash_container id="profile" />
  <.simple_form phx-submit="save-profile">...</.simple_form>
</.card>

# In your LiveView
def handle_event("save-contact", _params, socket) do
  {:noreply, push_flash(socket, "contact-form", "success", "Contact saved!")}
end

Each container receives messages independently — pushing to "contact-form" does not affect "profile".

Summary

Functions

Removes every flash currently rendered in container_id.

Renders a single flash message as a Pure Admin alert.

Renders a flash container that receives messages from push_flash/5.

Renders a group of flash messages (info + error by default).

Pushes a flash message to a specific container via push_event.

Functions

clear_flash(socket, container_id)

Removes every flash currently rendered in container_id.

Useful when a form result should replace (rather than stack on top of) a prior status — e.g. clear an old "Validation failed" banner before pushing a new "Saved" one.

push_flash(socket, "my-form", "success", "Saved!", replace: true)

…is the one-call equivalent. Use clear_flash/2 when you want to clear without immediately pushing a new message.

flash(assigns)

Renders a single flash message as a Pure Admin alert.

Examples

<.flash kind={:info} flash={@flash} />
<.flash kind={:error} title="Oops!" flash={@flash} />
<.flash kind={:info}>Custom inline message</.flash>

Attributes

  • id (:string) - the optional id of flash container. Defaults to nil.
  • flash (:map) - the map of flash messages to display. Defaults to %{}.
  • title (:string) - optional title above the flash message. Defaults to nil.
  • kind (:atom) - used for styling and flash lookup. Must be one of :info, :error, :warning, or :success.
  • is_dismissible (:boolean) - show close button. Defaults to true.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block - the optional inner block that renders the flash message.

flash_container(assigns)

Renders a flash container that receives messages from push_flash/5.

Place this wherever you want inline flash alerts to appear — inside cards, forms, or any other container. Each container operates independently.

Requires the PureAdminFlash JS hook (included in PureAdminHooks).

Examples

<.flash_container id="contact-form" />
<.flash_container id="profile-card" class="my-custom-class" />

Attributes

  • id (:string) (required) - unique ID, also used as the target for push_flash.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

flash_group(assigns)

Renders a group of flash messages (info + error by default).

Drop-in replacement for the flash_group/1 from CoreComponents.

Examples

<.flash_group flash={@flash} />

<.flash_group flash={@flash} kinds={[:info, :error, :warning, :success]} />

Attributes

  • flash (:map) (required) - the map of flash messages.
  • id (:string) - the optional id of flash container. Defaults to "flash-group".
  • kinds (:list) - which flash kinds to render. Defaults to [:info, :error].

push_flash(socket, container_id, variant, message, opts \\ [])

Pushes a flash message to a specific container via push_event.

The target flash_container/1 with the matching id renders the message client-side using the PureAdminFlash JS hook. Multiple containers on the same page work independently.

The message body supports basic markdown: bold, italic, [links](url), unordered lists (- item), ordered lists (1. item), and paragraphs.

Options

  • :title — optional heading above the message
  • :duration — auto-dismiss in ms (default: 0 = persistent)
  • :dismissible — show close button (default: true)
  • :actions — list of action button maps (see below)

Action buttons

Each action is a map with:

  • :label — button text (required)
  • :variant — button style, e.g. "primary", "danger", "secondary" (default: "secondary")
  • :event — LiveView event name to push when clicked
  • :params — map of params sent with the event
  • :dismiss — if true, dismisses the flash on click

Examples

socket |> push_flash("my-form", "success", "Saved!")

socket |> push_flash("my-form", "danger", "Failed.", title: "Error")

socket |> push_flash("my-form", "info", "Gone in 5s", duration: 5000)

socket |> push_flash("my-form", "warning", """
Are you sure you want to delete **Invoice #1234**?

This action cannot be undone.
""",
  title: "Confirm Deletion",
  actions: [
    %{label: "Delete", event: "delete-record", params: %{id: 1234}, variant: "danger"},
    %{label: "Cancel", dismiss: true, variant: "secondary"}
  ])