ToneDot
The state of anything that runs as a small glyph and a word. Pick it inside rows and headers; use the label even where it is hidden.
- ToneDot
PreviewLink to the section Preview
Live in all three themes. Everything here is interactive.
Light theme, ToneDot
- Running
- Starting
- Restarting
- Paused
- Stopped
- Crashed
- Unhealthy
Dark theme, ToneDot
- Running
- Starting
- Restarting
- Paused
- Stopped
- Crashed
- Unhealthy
High contrast theme, ToneDot
- Running
- Starting
- Restarting
- Paused
- Stopped
- Crashed
- Unhealthy
UsageLink to the section Usage
import { ToneDot } from '@skribly/ui/ops'<ToneDot state="running" label={t('state.running')} />
<ToneDot state="exited" label={t('state.crashed')} hideLabel />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
- Every state has its own shape: full circle, ring, bars, open ring, diamond and triangle.
- The word is always in the page, visible or for screen readers.
- States in motion pulse, and stop under reduced motion.
- The glyph takes the text colour in forced colours.
This demo runs through axe in all three themes on every test run. See what the tests check.