Independent inline flash messages using the PureAdminFlash JS hook. Multiple containers on the same page receive messages independently.

Card A — Contact Form

Push flash messages to this card only.

Card B — Profile

Push flash messages to this card only.

Advanced: Markdown Body & Action Buttons

Flash messages support markdown in the body and action buttons that push events back to the server.

Standard Phoenix Flash

The standard flash_group/1 still works with Phoenix's built-in put_flash/3. This uses the single @flash map on the socket — the alert appears at the top of the main content area (placed in app.html.heex).

Usage

Template

heex
<!-- Place a flash container inside any card or form -->
<.card title_text="Contact Form">
  <.flash_container id="contact-form" />
  <.simple_form phx-submit="save-contact">
    ...
  </.simple_form>
</.card>

Server

elixir
# Simple flash
push_flash(socket, "my-form", "success", "Saved!")

# With title and auto-dismiss
push_flash(socket, "my-form", "info", "Gone in 5s",
  title: "Notice", duration: 5000)

# Markdown body with action buttons
push_flash(socket, "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"}
  ])

Standard flash (backwards compatible)

heex
<!-- Standard Phoenix flash (single @flash map) -->
<.flash_group flash={@flash} />

John Doe

Administrator

Settings

Sidebar
Display
Profile Panel
Body text size. All elements scale proportionally.