StatusDot

A small coloured dot that names a record's state beside its label.

QueuedBuildingReadyDegradedError

3 of 5 statuses shown

View code

tsx

<StatusDot color="neutral">Queued</StatusDot>
<StatusDot color="brand" pulse>Building</StatusDot>
<StatusDot color="success">Ready</StatusDot>
<StatusDot color="warning">Degraded</StatusDot>
<StatusDot color="danger">Error</StatusDot>

<StatusDot color="danger" aria-label="Down" />

<StatusDot.Summary
	colors={["success", "warning", "danger"]}
	count={3}
	total={5}
	label="3 of 5 statuses shown"
/>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

Terminal

npm add @sdxc/ui remix

typescript

import "@sdxc/ui/theme.css";

Or copy it into your project to edit it:

Terminal

sdxc ui add status-dot

Usage

typescript

import { StatusDot } from "@sdxc/ui";

Renders a dot and its label. With a label the dot is aria-hidden, since the text already names the state; without one the host becomes role="img" and its aria-label is the name.

Composition

The parts the component publishes, each a static property of the host.

StatusDot
StatusDot.SummaryRenders a compact summary of several states, overlapping dots followed by n/N, for a filter trigger that shows which statuses are on.

Examples

tsx

<StatusDot color="brand" pulse>{t("deploy.building")}</StatusDot>

tsx

<StatusDot color="danger" aria-label={t("monitor.down")} />

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Required	Description
`color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	No	Semantic role of the state. Defaults to DEFAULT_COLOR.
`pulse`	`boolean`	No	Marks a state still in progress (queued, deploying, checking): the dot pulses until the state settles, and holds still for visitors who prefer reduced motion.
`children`	`RemixNode`	No	The state's name, such as "Up" or "Deploying".

Also accepts everything in TagProps<"span">.

StatusDot.Summary

Prop	Type	Required	Description
`colors`	`Color[]`	No	One dot per chosen state, drawn overlapping in this order; an empty list shows `n/N` alone.
`count`	`number`	Yes	How many states are chosen, the `n` of `n/N`.
`total`	`number`	Yes	How many states exist, the `N` of `n/N`.
`label`	`string`	Yes	What the summary announces in full, such as "4 of 5 statuses shown".

Also accepts everything in TagProps<"span">.

Types

Name	Values	What it decides
`Color`	`"brand" \| "neutral" \| "success" \| "warning" \| "danger"`	The role a state reads in: up or ok is `success`, degraded or pending is `warning`, down or failed is `danger`, paused or unknown is `neutral`, in progress is `brand`.