Design systemStatus dot
An 8px dot that shows whether a chat session is connected, thinking or compacting.
import StatusDot from "@/components/StatusDot";StatusDot is a small round indicator for a live chat session. It takes the connection status and two busy flags and picks one of four colours. It has no text of its own.
States
<StatusDot connectionStatus="connected" />
<StatusDot connectionStatus="disconnected" />
<StatusDot connectionStatus="connected" isThinking />
<StatusDot connectionStatus="connected" isCompacting />The flags are checked in order, and the first match wins.
| State | When | Colour | Motion |
|---|---|---|---|
| Compacting | isCompacting is true | --status-warning (#FBBF24) | Tailwind animate-pulse: fades to 50% and back every 2s |
| Thinking | isThinking is true | --status-warning (#FBBF24) | animate-thinking: fades to 40% and back every 1.2s |
| Connected | connectionStatus === "connected" | --status-success (#08BD50) | None |
| Disconnected | Any other connectionStatus, including none | --status-disconnected (#ADB2CE) | None |
The three colours are the app's older status variables, set in src/index.css. They are not part of the --color-* tokens.
With a label
Compacting and Thinking are the same yellow and differ only in how fast they pulse. Always write the state next to the dot.
<span className="inline-flex items-center gap-2">
<StatusDot connectionStatus="connected" isThinking />
<span>Q4 pipeline review</span>
<span className="text-[12px] text-[var(--color-grey-500)]">Sage is working</span>
</span>Props
| Prop | Type | Default | Notes |
|---|---|---|---|
connectionStatus | string | Only "connected" is treated as connected. Every other value shows the grey dot. | |
isThinking | boolean | Yellow, with the 1.2s pulse. | |
isCompacting | boolean | Yellow, with the 2s pulse. Wins over isThinking. |
It always renders an 8px by 8px <span> (w-2 h-2 rounded-full inline-block). There is no size, no className and no way to pass aria-* props.
Accessibility
- The dot is a bare
<span>with no role and no text, so screen readers skip it. The state has to be in visible text next to it. - Colour is the only difference between connected and disconnected, so do not rely on the dot alone for that either.
- Both pulses keep running when the person has asked for reduced motion.
Do and don't
- Do pair the dot with a word: "Connected", "Sage is working", "Reconnecting".
- Do use it only for the state of a live session. For the status of a page, a recommendation or a workflow run, use a Tag.
- Don't use it as a decoration or a bullet.
Where it is used
Nowhere in src/ at the moment. The component is src/components/StatusDot.jsx.