PhiaUi.Components.StatusIndicator (phia_ui v0.1.17)

Status indicator components for displaying live system status, user presence, connection state, and service health.

Inspired by Atlassian Design System Lozenge, GitHub's status dots, Discord's user presence indicators, and Vercel/Linear's service status pages.

Pure HEEx — no JavaScript required.

Sub-components

Component	Purpose
`status_indicator/1`	Colored dot with optional label (online/offline/away/busy)
`connection_status/1`	Online/offline/reconnecting state display
`live_indicator/1`	Pulsing "LIVE" badge (YouTube/Twitch style)
`service_status_row/1`	Service name + status for status pages

Status indicator (user presence)

<div class="flex items-center gap-2">
  <.avatar src={@user.avatar} />
  <.status_indicator status={:online} label="Online" />
</div>

Connection status

<.connection_status status={:reconnecting} />

Live badge

<.live_indicator />
<.live_indicator label="STREAMING" />

Service status page row

<.service_status_row name="API" status={:operational} />
<.service_status_row name="Database" status={:degraded} />
<.service_status_row name="CDN" status={:outage} />

Summary

Functions

connection_status(assigns)

Renders a connection state indicator with icon, colored text, and label.

live_indicator(assigns)

Renders a pulsing "LIVE" badge, similar to YouTube/Twitch live stream indicators.

service_status_row(assigns)

Renders a single row for a service status page.

status_indicator(assigns)

Renders a colored status dot with optional label.

Functions

connection_status(assigns)

Renders a connection state indicator with icon, colored text, and label.

Use in application headers, status bars, or realtime feature areas to communicate the current WebSocket/network connection state to the user.

Example

<%!-- In a LiveView that monitors connection --%>
<.connection_status status={if @connected, do: :online, else: :reconnecting} />

Attributes

status (:atom) - Current connection state. Defaults to :online. Must be one of :online, :offline, :reconnecting, or :connecting.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attrs forwarded to the wrapper <div>.

live_indicator(assigns)

Renders a pulsing "LIVE" badge, similar to YouTube/Twitch live stream indicators.

Use for real-time feeds, live dashboards, active broadcasts, or streaming events.

Example

<div class="flex items-center gap-2">
  <.live_indicator />
  <span class="text-sm font-medium">Daily Standup</span>
</div>

<%!-- Custom label --%>
<.live_indicator label="RECORDING" />

Attributes

label (:string) - Text displayed inside the badge. Defaults to "LIVE".
pulse (:boolean) - When true, animates the dot with a ping pulse. Defaults to true.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attrs forwarded to the <span>.

service_status_row(assigns)

Renders a single row for a service status page.

Combines a service name, optional description, and a colored status lozenge. Stack multiple rows inside a container for a full status page.

Example

<div class="space-y-2 divide-y divide-border">
  <.service_status_row name="API" status={:operational} />
  <.service_status_row name="Database" status={:degraded} description="Elevated response times" />
  <.service_status_row name="CDN" status={:maintenance} description="Scheduled until 4 AM UTC" />
</div>

Attributes

name (:string) (required) - Service name (e.g. 'API', 'Database', 'CDN').
status (:atom) - Current service health status. Defaults to :unknown. Must be one of :operational, :degraded, :partial_outage, :outage, :maintenance, or :unknown.
description (:string) - Optional detail text (e.g. 'Response times elevated' or 'All systems normal'). Defaults to nil.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attrs forwarded to the root <div>.

status_indicator(assigns)

Renders a colored status dot with optional label.

Use to convey presence (online/offline), process state, or health status. The dot inherits a semantic color based on :status.

Example

<%!-- User presence in a list --%>
<.status_indicator status={:online} label="Online" />
<.status_indicator status={:away} label="Away" />
<.status_indicator status={:busy} label="Do not disturb" />
<.status_indicator status={:offline} label="Offline" />

<%!-- With pulse animation for live state --%>
<.status_indicator status={:online} show_pulse />

Attributes

status (:atom) - Presence/connection state controlling the dot color. Defaults to :unknown. Must be one of :online, :offline, :away, :busy, :idle, :error, or :unknown.
label (:string) - Optional text label shown beside the dot. Defaults to nil.
size (:atom) - Dot size. Defaults to :default. Must be one of :sm, :default, or :lg.
show_pulse (:boolean) - When true, animates the dot with a pulse ring (draws attention for active states). Defaults to false.
class (:string) - Additional CSS classes. Defaults to nil.
Global attributes are accepted. HTML attrs forwarded to the wrapper <span>.