TypingIndicator

Ver la demo

Ficha

Categoría
Data display
Nivel
átomo
Estado
en revisión
Radix
no
Actualizado
2026-10-26
Fuente
design-system/componentes/TypingIndicator.md

El cliente simulado está generando su respuesta: tres puntos sin burbuja (las burbujas son solo para mensajes). El campo sigue activo: el ejecutivo escribe e interrumpe (R-01.8, reglas/03 §03.3).

Cuándo usarlo

  • En el hilo de la simulación, junto a la cara del cliente, mientras el modelo responde.

Cuándo NO usarlo

  • Carga de página o de contenido → skeletons; respuestas del coach.

Anatomía

<div role="status">, padding vertical 12: tres puntos de 8 (gap 4) + etiqueta (caption/md, visible solo con Show label).

Props

PropFigmaValoresPor defecto
labelLabel«<Nombre> está respondiendo…»El cliente está respondiendo…
showLabelShow labelbooleanfalse

Estados

Animado (pulso en secuencia: opacidad 40→100 %, ciclo 1.2 s, desfase 0.2 s) · estático con prefers-reduced-motion (puntos al 100/70/40 %, como en Figma).

Accesibilidad

  • role=status con aria-live=polite anuncia la etiqueta aunque no se muestre; los puntos son decorativos.
  • Movimiento respetuoso: sin animación con prefers-reduced-motion.

Contenido

Etiqueta: «<Nombre> está respondiendo…».

Errores conocidos

  • Ninguno medido (test @R-01.8: el campo sigue activo mientras se muestra). La animación es no automatizable: revisada a mano.

Changelog

  • 2026-10-26 · nace (T-02).

Tokens que consume