'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
Status and ColorSwatch
A colored dot with words for service health or presence, and a color sample with its name.
Ant Design: Badge status
import { Status, ColorSwatch } from '@alea/ui';
Examples
Status and swatches
Words with every color.
OperationalDegradedOutageOffline
var(--alea-purple-400)var(--alea-yellow-200)#8b6cf080Props
Status props
A colored dot with a label: service health, presence, deploy state (Chakra Status, Spectrum StatusLight).
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | - | The words: the color is never the only signal. |
className | string | - | |
pulse | boolean | - | Breathe, for live states (pulse pattern; stops with reduced motion). |
tone | "danger" | "success" | "warning" | "accent" | "info" | "neutral" | 'neutral' | The state: success (online, live), warning (degraded), danger (down), neutral (offline), info. |
ColorSwatch props
A color sample, with a checkerboard under transparent colors (Mantine ColorSwatch, Chakra ColorSwatch).
| Prop | Type | Default | Description |
|---|---|---|---|
colorrequired | string | - | Any CSS color, or a token: var(--alea-accent). |
labelrequired | string | - | Name for screen readers ("Orchid, purple 400"). |
className | string | - | |
shape | "circle" | "square" | 'circle' | circle (default) or square. |
showValue | boolean | - | Shows the name and the value under the swatch. |
size | number | 28 | Size in px. Default 28. |
style | CSSProperties | - |
Accessibility
- Status always has words: the color is never the only signal.
- ColorSwatch is an image named after the color.
Do and don't
Do
- Use pulse only for live states.
Don't
- Don't show a status dot without its label.