Densidad y estados
Vacío, carga, error, deshabilitado y seleccionado.
Los estados de un control
Cinco estados, cinco pares de tokens. Deshabilitado baja el contraste y pierde la sombra al hover — un control muerto no reacciona. Seleccionado usa el par azul suave, nunca un borde.
Vacío, cargando y error son pantallas de primera clase
El vacío dice qué va a pasar y ofrece la acción que lo llena. El error dice qué falló y qué quedó a salvo — nunca un código pelado. El esqueleto imita la forma del contenido real.
El pulso del esqueleto, si se usa, corre a 200ms con la curva del sistema y se apaga con reduced motion. Ninguno de los tres lleva ilustración: son estados de trabajo, no momentos de marca.
Sin conversaciones
Cuando actives la campaña, las respuestas llegan aquí.
Activar campañaCargando
No se pudo enviar
WhatsApp rechazó el mensaje. El hilo quedó intacto.
ReintentarLa densidad es un interruptor, no un rediseño
Las dos columnas usan la misma clase: h-[var(--sds-control-height)]. La compacta solo agrega data-density="compact" al contenedor y el token hace el resto.
En pantallas táctiles la densidad se ignora hacia abajo: ningún control queda bajo los 44px, tampoco en modo compacto.
Cómoda · 40px
Compacta · 36px
- Seleccionado
- #E7EAFD / #142DB8
- Deshabilitado
- #E9EAF1 / #8A8C99 · 0.58
- Cargando
- #E7EAFD / #1E3CE6
- Error
- danger-surface / foreground
- Densidad compacta
- 28 / 36 / 44 px
- Piso táctil
- 44px siempre