StatusDot

<caos-status-dot>

a compact connected/healthy indicator for a service or integration

May be placed on a record page, an app’s home page, a page inside an app and the utility bar.

Inputs

Name	Attribute	Description	Type	Default	Required
intent	intent, markup only	What the dot means: success (connected, healthy), warning (degraded), danger (down), info (informational), muted (unknown or idle). An unrecognised value draws the muted dot.	text — one of success, warning, danger, info, muted	muted	Optional
label	label, markup only	The word beside the dot, which also becomes the accessible name. Unset, no text is drawn and the name falls back to naming the intent — see accessibility.	text	none declared	Optional
pulse	pulse, markup only	Animate a fading ring out of the dot, for a signal that is genuinely live. Suppressed under prefers-reduced-motion: reduce, where the ring is not drawn.	boolean	false	Optional

Events

This piece raises no events.

Slots

Nothing goes inside this piece.

Styling hooks

Design token	What it controls
--caos-color-success	The dot when the intent is success.
--caos-color-warning	The dot when the intent is warning.
--caos-color-danger	The dot when the intent is danger.
--caos-color-info	The dot when the intent is info.
--caos-color-text-muted	The dot when the intent is muted, which is also the default.
--caos-color-text	The label, which sits on the neutral surface rather than on a tint.
--caos-font	The typeface the label is set in.
--caos-radius-pill	The roundness of the dot.
--caos-space-2	The gap between the dot and the label.

Methods

Nothing else drives this piece by calling it.

Readable state

Nothing on this piece can be read back.

Styling parts

Part	Which piece of it	When it is there
::part(dot)	the dot	Always
::part(label)	the text beside it	Always

When to use it

The reachability or health of something that runs continuously, where the whole message fits in a colour and at most one word, and where it needs to be readable in a dense list.

What to use instead

• StatusPill — The subject is a RECORD and its lifecycle state — Draft, Approved, Lost. Those need the word spelled out and they change as somebody works the record; a dot reports a condition that changes on its own.
• NoticeBanner — The outage needs explaining rather than flagging — what is affected, what to do, until when. A dot can only say which of five bands something is in.
• ProgressBar — Something is working through a job with an end, rather than sitting in a steady state.
• Tag — The chip is a label somebody applied rather than a condition being reported.

Accessibility

The element is a role="img" with an accessible name, so it is announced as one thing rather than as a stray decorative span, and the dot itself is hidden because the name already carries it. When a label is set, that IS the name. Left to the author: setting one — with no label the name becomes Status: success, which says a band and not a subject, and a column of those is unusable. The colour is also never the only signal in practice, because the label is what a screen reader reads; a dot with no label in a table needs the name to come from its row.

Examples

The five bands

Every intent with the word it stands for, so a set of integrations can be given colours as a vocabulary rather than one row at a time.

{
  "id": "example",
  "section": "The five bands",
  "columns": 1,
  "items": [
    {
      "id": "status_dot_1",
      "type": "component",
      "key": "status_dot",
      "inputs": {
        "intent": "success",
        "label": "Connected"
      }
    },
    {
      "id": "status_dot_2",
      "type": "component",
      "key": "status_dot",
      "inputs": {
        "intent": "warning",
        "label": "Degraded"
      }
    },
    {
      "id": "status_dot_3",
      "type": "component",
      "key": "status_dot",
      "inputs": {
        "intent": "danger",
        "label": "Down"
      }
    },
    {
      "id": "status_dot_4",
      "type": "component",
      "key": "status_dot",
      "inputs": {
        "intent": "info",
        "label": "Read only"
      }
    },
    {
      "id": "status_dot_5",
      "type": "component",
      "key": "status_dot",
      "inputs": {
        "intent": "muted",
        "label": "Not configured"
      }
    }
  ]
}

<caos-status-dot intent="success" label="Connected"></caos-status-dot>
<caos-status-dot intent="warning" label="Degraded"></caos-status-dot>
<caos-status-dot intent="danger" label="Down"></caos-status-dot>
<caos-status-dot intent="info" label="Read only"></caos-status-dot>
<caos-status-dot intent="muted" label="Not configured"></caos-status-dot>

A live signal

The opt-in pulse, for a connection that is genuinely streaming rather than merely last known to be up. Under a reduced-motion setting the ring is not drawn and the dot alone remains.

{
  "id": "example",
  "section": "A live signal",
  "columns": 1,
  "items": [
    {
      "id": "status_dot_1",
      "type": "component",
      "key": "status_dot",
      "inputs": {
        "intent": "success",
        "label": "Streaming from GP",
        "pulse": true
      }
    }
  ]
}

<caos-status-dot intent="success" label="Streaming from GP" pulse></caos-status-dot>