# `PhiaUi.Components.StatusIndicator`
[🔗](https://github.com/charlenopires/PhiaUI/blob/v0.1.17/lib/phia_ui/components/feedback/status_indicator.ex#L1)

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} />

# `connection_status`

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`

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`

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`

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>`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*