Status dot

In review

Live · web

Semantic set: success · warning · error · info · neutral

success

warning

error

info

neutral

Presence: dot + label (the label is the accessible text)

OnlineIdleBusyLiveOffline

Live: opacity pulse + expanding ping (calm static ring under reduced-motion)

pulse · streaming

pulse + ping · recording

ping · connected

Sizes: xs 6 · sm 8 · md 10 (dot scales with its label)

Anchored: pinned to a host corner (avatar) and leading a session chip

avatar · online

avatar · live

nockerl-design · docscredential-store · allowlistdueydo · deploy

Outline: a hollow ring (a quieter, lower-emphasis state)

success

warning

error

info

neutral

Live animation is running. The pulse fades opacity and the ping ring expands; both freeze to a calm static ring under reduced-motion.

Code

// Web: React, consuming @dizyx/nockerl-tokens. (Web is the laggard platform; this is the
// canonical API the published @dizyx/nockerl-react package is intended to expose. It unifies
// the shipped idioms: Compose's NockerlStatusDot + PulsingDot and Voice's PulsingDot.)
import { NockerlStatusDot } from '@dizyx/nockerl-react';

// bare dot: name it so the state is never conveyed by color alone
<NockerlStatusDot status="success" ariaLabel="Online" />

// dot + label (the label is the accessible text)
<NockerlStatusDot status="warning" label="Idle" />
<NockerlStatusDot status="error" label="Busy" />
<NockerlStatusDot status="neutral" label="Offline" />

// live: opacity pulse for streaming/recording, an expanding ping ring for "connected"
<NockerlStatusDot status="info" label="Streaming…" pulse ariaLabel="Streaming" />
<NockerlStatusDot status="error" pulse ping ariaLabel="Recording" />

// anchored to a host corner (the avatar-presence + session-chip idiom); pass the
// host surface so the dot sits in a matching notch, and outline for a quieter state
<NockerlStatusDot status="success" surface="var(--color-card-surface1)" ariaLabel="Online" />
<NockerlStatusDot status="info" outline ariaLabel="Idle" />

// Android: the published Compose package com.dizyx.nockerl.design.components (GitHub Packages Maven).
// A first-class NockerlStatusDot with two hue ladders: the semantic status ladder, and a raw
// palette color (the session-dot idiom; pass a dot token, never a literal). Pulse fades alpha.
import com.dizyx.nockerl.design.components.NockerlStatusDot
import com.dizyx.nockerl.design.components.NockerlStatusDotStatus
import com.dizyx.nockerl.design.components.NockerlStatusDotDefaults

val colors = LocalNockerlColors.current

// semantic ladder: hue AND the default accessible name come from the status
NockerlStatusDot(status = NockerlStatusDotStatus.SUCCESS)                       // "Success"
NockerlStatusDot(status = NockerlStatusDotStatus.NEUTRAL, size = NockerlStatusDotDefaults.QuietSize)

// live states, the same dot pulsed (alpha 1f -> 0.3f, tween 800ms, Reverse)
NockerlStatusDot(status = NockerlStatusDotStatus.INFO, contentDescription = "Streaming", pulse = true)

// raw palette color: the session-dot idiom; accessible name required
NockerlStatusDot(color = colors.dotStreaming, contentDescription = "Streaming", pulse = true)
NockerlStatusDot(color = colors.dotUnread, contentDescription = "Unread")

// SwiftUI: the published NockerlDesign SwiftPM package. A first-class NockerlStatusDot with
// the full semantic ladder, an optional label, and a live pulse. Two hue ladders: the
// semantic status ladder, and a raw palette color (the session-dot idiom).
import NockerlDesign

// bare dot: name it so state is never conveyed by color alone
NockerlStatusDot(status: .success)                       // accessible name "Success"

// dot + label (the label is the accessible text)
NockerlStatusDot(status: .warning, label: "Idle")
NockerlStatusDot(status: .neutral, label: "Offline", size: .quiet)

// live: opacity pulse (1.0 ↔ 0.3, 800ms; freezes under Reduce Motion)
NockerlStatusDot(status: .info, label: "Streaming…", pulse: true)

// raw palette color: the session-dot idiom; accessible name required
NockerlStatusDot(color: palette.dotStreaming, label: "Streaming", pulse: true)

Parameters

Prop	Type	Default	Description
`status`	`StatusKind`	`'neutral'`	Which semantic state to render. The hue comes from the status / dot token ramp.
`size`	`StatusSize`	`'sm'`	Dot diameter ramp: xs 6 · sm 8 · md 10 (geometry derived from the spacing scale).
`label`	`string`		Optional visible label rendered after the dot (baseline-aligned).
`pulse`	`boolean`	`false`	Live: fade the dot's opacity (the shipped pulse). Use for streaming / recording / connected.
`ping`	`boolean`	`false`	Live ring: an expanding concentric "ping" in the same hue (web-original; see the drift note).
`outline`	`boolean`	`false`	Outline-only: a hollow ring in the hue instead of a filled dot.
`surface`	`string`		The host surface the dot sits ON. It fills the notch ring so the dot reads as a chip on that surface. Defaults to the canvas; pass a card token on a card.
`ariaLabel`	`string`		Accessible name. Required when there is no visible `label`, so the state is never conveyed by color alone (rendered as a role="img" name + sr-only text).

Also accepts the native <span> attributes (e.g. onClick, disabled, id, aria-*, data-*), forwarded straight through, plus a forwarded ref.

The published NockerlStatusDot ships as a first-class wrapper with two overloads: a semantic status ladder and a raw palette color (the session-dot idiom).

Parameter	Type	Default	Description
`NockerlStatusDot(status, …)` *	`NockerlStatusDotStatus`		Semantic ladder. Hue AND the default accessible name come from the status: `SUCCESS · WARNING · ERROR · INFO · NEUTRAL`.
`NockerlStatusDot(color, contentDescription, …)` *	`Color, String?`		Raw palette color, the session-dot idiom (`dotStreaming` · `dotUnread` · …, never a literal). Accessible name required (no status to derive one).
`size`	`Dp`	`LoudSize (8.dp)`	`NockerlStatusDotDefaults.LoudSize` (8dp, live/attention) or `QuietSize` (6dp, ambient).
`pulse`	`Boolean`	`false`	Animate the live alpha pulse (`1f → 0.3f`, `tween(800ms)`, `RepeatMode.Reverse`).

The published NockerlStatusDot ships the full semantic ladder + optional label + live pulse, with two inits mirroring Compose: a semantic status and a raw palette color.

Parameter	Type	Default	Description
`NockerlStatusDot(status:label:pulse:size:)` *	`NockerlStatusDotStatus, String?, Bool, NockerlStatusDotSize`		Semantic ladder: `.success · .warning · .error · .info · .neutral` drive hue AND the default accessible name; `label` is an optional visible + accessible label.
`NockerlStatusDot(color:label:pulse:size:)` *	`Color, String, Bool, NockerlStatusDotSize`		Raw palette color, the session-dot idiom (`palette.dotStreaming`, …). `label` is required, non-empty (no status to derive a name from).
`size`	`NockerlStatusDotSize`	`.loud`	`.loud` (8pt, live/attention) or `.quiet` (6pt, ambient).
`pulse`	`Bool`	`false`	The live pulse: opacity `1.0 ↔ 0.3`, 800ms easeInOut autoreversing. Frozen at full opacity under Reduce Motion.

Cross-platform drift (one open item)

This is the dedicated semantic state dot, distinct from badge, which is a passive count / notification overlay. The published Compose (com.dizyx.nockerl.design.components) and Swift (NockerlDesign) packages now both ship a first-class NockerlStatusDot with the full semantic ladder (success / warning / error / info / neutral), the raw session-dot color idiom, an optional label, the size ramp (quiet 6pt / loud 8pt), and a matching 800ms opacity pulse. The earlier coverage gap, duration mismatch, and “no shared wrapper” drift are all resolved. What remains:

The ping ring (settled): the expanding concentric ping ring is dropped. One attention expression everywhere: an 800ms opacity pulse (1 → ~0.3), which every native platform already animates. The web-only ping is retired.