PhoenixKitWeb.Components.Core.StatusDot (phoenix_kit v2.0.0)

Copy Markdown View Source

A tiny semantic status indicator: a coloured dot with an optional label. The generic companion to the domain-specific badges in PhoenixKitWeb.Components.Core.Badge — for "online/offline", "connected", "live socket up", "syncing" and every other place a little coloured circle keeps getting hand-rolled.

Origin: extracted from NordSwitch (device online state, websocket health, account connection state).

Summary

Functions

status_dot(assigns)

Renders a status dot, optionally with a label.

Functions

status_dot(assigns)

Renders a status dot, optionally with a label.

Examples

<.status_dot variant={:success} label="online" />
<.status_dot variant={:error} label="socket down" size={:sm} />
<.status_dot variant={:info} pulse />

<%!-- boolean convenience for the overwhelmingly common case --%>
<.status_dot up={@device.online} label={if @device.online, do: "online", else: "offline"} />

Attributes

  • variant (:atom) - Semantic colour; overrides up when set. Defaults to nil. Must be one of :success, :error, :warning, :info, :neutral, or nil.
  • up (:boolean) - Boolean convenience: true → success, false → error (ignored when variant set). Defaults to nil.
  • label (:string) - Optional text next to the dot. Defaults to nil.
  • size (:atom) - Dot size. Defaults to :md. Must be one of :xs, :sm, or :md.
  • pulse (:boolean) - Animate the dot (attention/live state). Defaults to false.
  • class (:any) - Extra classes for the wrapper. Defaults to nil.
  • state_label (:string) - Overrides the announced state name. The defaults are generic (up reads "online"/"offline"); anything else — a payment, a job — should say so itself. Defaults to nil.
  • Global attributes are accepted. Extra attributes for the wrapper (title, data-*, …).