StatusDot
A small dot and a word for the state of a process, a service or a person. Pick it for lists of things that run.
- StatusDot
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, StatusDot
RunningStartingWaiting for inputExited with code 1Idleapi-gateway Running
Dark theme, StatusDot
RunningStartingWaiting for inputExited with code 1Idleapi-gateway Running
High contrast theme, StatusDot
RunningStartingWaiting for inputExited with code 1Idleapi-gateway Running
UsageLink to the section Usage
import { StatusDot } from '@skribly/ui/feedback'<StatusDot tone="ok" label="Running" pulse />Every label is a prop, so the app passes its own words in its own language. See no built-in text.
AccessibilityLink to the section Accessibility
- The label is always in the page. hideLabel keeps it for screen readers only, so use it only when the state is written nearby.
- The dot is hidden from screen readers and turns CanvasText in forced colours.
- The pulse stops under reduced motion.
- When the state changes while the page is open, announce it with a live region.
This demo runs through axe in all three themes on every test run. See what the tests check.