PhiaUi.Components.GlobalMessage (phia_ui v0.1.17)

Global message component for top-center auto-dismissing feedback messages.

Inspired by Ant Design message, Mantine notifications, and the global feedback pattern used in major SaaS products (Linear, Vercel, Notion).

Unlike Toast (which stacks in the corner), global messages appear at the top center of the viewport and are used for brief, non-intrusive feedback about the result of a user action. They auto-dismiss after a configurable duration.

Architecture

The component has a single part:

global_message/1 — the fixed viewport container rendered once in your root layout. The PhiaGlobalMessage JS hook listens for push_event/3 from any LiveView and renders message nodes dynamically.

Setup

1. Add the viewport once in your root layout

<%!-- lib/my_app_web/components/layouts/root.html.heex --%>
<body>
  <.global_message id="phia-global-message" />
  <%= @inner_content %>
</body>

2. Register the hook in app.js

import PhiaGlobalMessage from "./hooks/global_message"

let liveSocket = new LiveSocket("/live", Socket, {
  hooks: { PhiaGlobalMessage }
})

3. Push messages from any LiveView

push_event(socket, "phia-message", %{
  content: "Settings saved.",
  type: "success",
  duration_ms: 3000
})

push_event(socket, "phia-message", %{
  content: "Failed to save. Please try again.",
  type: "error"
})

push_event Payload

Key	Type	Required	Default	Description
`content`	string	yes	—	Message text shown to the user
`type`	string	no	`"info"`	One of `"info"`, `"success"`, `"error"`, `"warning"`, `"loading"`
`duration_ms`	integer	no	`3000`	Auto-dismiss delay in ms (0 = no dismiss)

Message Types

Type	Icon	Color	Use case
`"info"`	ℹ	Blue	Neutral info, page transitions
`"success"`	✓	Green	Saved, created, published, completed
`"error"`	✗	Red	Failed, invalid, permission denied
`"warning"`	⚠	Amber	Caution, rate limit approaching
`"loading"`	spinner	Muted	Long-running background operation started

Accessibility

Container has role="status" and aria-live="polite" so screen readers announce messages as they appear.
aria-atomic="false" allows individual messages to be announced as added.

Summary

Functions

global_message(assigns)

Renders the global message viewport container.

Functions

global_message(assigns)

Renders the global message viewport container.

Place once in your root layout. Messages appear centered at the top of the viewport and auto-dismiss after their configured duration.

Example

<.global_message id="phia-global-message" />

Attributes

id (:string) (required) - Unique ID — hook mount point and push_event target.
max_messages (:integer) - Maximum number of messages visible at once. Defaults to 5.
class (:string) - Additional CSS classes for the container. Defaults to nil.
Global attributes are accepted. HTML attrs forwarded to the container <div>.