A small colored dot that communicates status like online/offline presence or severity levels. Supports five semantic variants and an optional pulse animation. Always pair with a visible text label, as color alone should not carry meaning.
Preview loads on approachPreview loads on approach
Exact source · status-dot-showcase
// Copyright (c) Meta Platforms, Inc. and affiliates.
'use client';
import {StatusDot} from '@astryxdesign/core/StatusDot';
import {HStack} from '@astryxdesign/core/Layout';
export default function StatusDotShowcase() {
return (
<HStack gap={2} vAlign="center">
<StatusDot variant="success" label="Positive" />
<StatusDot variant="warning" label="Warning" />
<StatusDot variant="error" label="Negative" />
<StatusDot variant="accent" label="Info" />
<StatusDot variant="neutral" label="Neutral" />
</HStack>
);
}
Usage
A small colored dot that communicates status like online/offline presence or severity levels. Supports five semantic variants and an optional pulse animation. Always pair with a visible text label, as color alone should not carry meaning.
Use StatusDot as a binary present/absent signal; avoid encoding many distinct states in a single dot, since color and size alone cannot reliably distinguish them.
Always pair with a visible text label so status is not conveyed by color alone.
Provide a descriptive label prop for screen reader accessibility.
Pair the dot with an icon that carries the status as a distinct shape when it must stand on its own without adjacent text, so meaning survives without color.
If you can't add a label or an icon, make sure the status is conveyed elsewhere accessibly (e.g. adjacent text, a table column, or a live region).
Rely on color alone to communicate status; StatusDot is not fully accessible in isolation, so the builder must make the status distinguishable in context via a label, an icon, or an accessible alternative.
Use the pulse animation for purely decorative purposes; reserve it for states that require immediate attention.
Enables a pulse animation; respects prefers-reduced-motion: reduce.
tooltip
string
Tooltip text shown on hover to explain the status meaning.
icon
ReactNode
Optional icon rendered centered inside the dot, painted in currentColor (the variant's ink). Gives the status a non-color mark, so use a different icon per status. Booleans and empty strings are ignored, so cond && <Icon /> is safe. Same contract as AvatarStatusDot.
xstyle
StyleXStyles
StyleX styles for layout customization (margins, positioning, sizing). Must be a stylex.create() value, not an inline style object like style={{}}.
Anatomy
Dot · required
Painted status dot that carries the selected semantic variant.
Status icon · optional
Optional caller-supplied icon rendered inside the dot.
