'/%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}
Datos
Status y ColorSwatch
Un punto de color con palabras para la salud de un servicio o la presencia, y una muestra de color con su nombre.
import { Status, ColorSwatch } from '@alea/ui';
Ejemplos
Estados y muestras
Palabras con cada color.
var(--alea-purple-400)var(--alea-yellow-200)#8b6cf080Configuraciones
Cada valor de cada propiedad, lado a lado. Los números coinciden con la leyenda.
- Tone
tone
Anatomía
Las partes del componente y la clase que da estilo a cada una.
Medidas
Medido del componente renderizado a 2x: alto, ancho, padding, radio e icono.
Cada tamaño y espacio es múltiplo de 4 px.
Tokens
Los tokens de diseño que usa este componente, con su valor en el tema actual. Cambia cualquiera para darle otro estilo.
Color
--alea-accent…--alea-status-danger…--alea-status-info…--alea-status-success…--alea-status-warning…--alea-text…--alea-text-muted…
Type
--alea-font-size-md…
Motion
--alea-motion-ease-out…
Props
Status props
Un punto de color con una etiqueta: salud de un servicio, presencia, estado de un deploy.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
childrenobligatoria | ReactNode | - | Las palabras: el color nunca es la única señal. |
className | string | - | |
pulse | boolean | - | Respira, para estados en vivo (patrón pulse; se detiene con movimiento reducido). |
tone | "danger" | "neutral" | "accent" | "success" | "warning" | "info" | 'neutral' | El estado: success (en línea, en vivo), warning (degradado), danger (caído), neutral (desconectado), info. |
ColorSwatch props
Una muestra de color, con un tablero de damas bajo los colores transparentes.
| Prop | Tipo | Por defecto | Descripción |
|---|---|---|---|
colorobligatoria | string | - | Cualquier color CSS, o un token: var(--alea-accent). |
labelobligatoria | string | - | Nombre para lectores de pantalla ("Orquídea, morado 400"). |
className | string | - | |
shape | "square" | "circle" | 'circle' | circle (por defecto) o square. |
showValue | boolean | - | Muestra el nombre y el valor bajo la muestra. |
size | number | 28 | Tamaño en px. Por defecto 28. |
style | CSSProperties | - |
Especificaciones
Generado desde el código: las variantes de los tipos, los estados y tokens del CSS, y los patrones de motion que aplican. Las grillas muestran el componente real en ambos temas; los números se miden en la página.
Status
- Variantes
tonedangerneutralaccentsuccesswarninginfo- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-status.alea-status-dot- Atributos data
data-tone=successdata-tone=warningdata-tone=dangerdata-tone=infodata-tone=accentdata-pulse
ColorSwatch
- Variantes
shapesquarecircle- Oscuro y claro
- Cada color viene de tokens del tema, así que sigue a data-theme (y a presets como Graphite) en la página o en cualquier contenedor. El contraste se revisa en ambos temas.
- Clases para estilos
.alea-swatch.alea-swatch-wrap.alea-swatch-name.alea-swatch-value- Atributos data
data-shape=square
Accesibilidad
- Status siempre tiene palabras: el color nunca es la única señal.
- ColorSwatch es una imagen con el nombre del color.
Qué hacer y qué evitar
Hacer
- Usa pulse solo para estados en vivo.
Evitar
- No muestres un punto de estado sin su etiqueta.