Vacío, error y éxito.

Cuándo usar

Los estados de página explican qué existe, qué ocurrió y cuál es la acción razonable sin culpar a la persona.

• Elegir el elemento HTML nativo antes de agregar una primitiva interactiva.
• Mantener el nombre, el resultado y la acción visibles sin depender de un icono.
• Documentar cualquier excepción en el producto consumidor.

Ejemplo visible

Anatomía

Estados y variantes

Accesibilidad

• El heading recibe foco cuando reemplaza la vista tras una acción.
• No usar ilustración como contenido principal.
• Los códigos técnicos van en detalle copiable.
• La acción conserva el objeto en su nombre.

HTML de referencia

<section class="cis-empty" aria-labelledby="sin-resultados">
  <h2 id="sin-resultados">No hay resultados</h2>
  <p>Ningún registro coincide con los 3 filtros activos.</p>
  <a href="/registros">Limpiar filtros</a>
</section>

Definition of Done

• Ejemplo visible y código copiable coinciden.
• Teclado, foco, nombre accesible y estado fueron probados.
• El componente funciona sin JavaScript o declara una mejora progresiva acotada.
• Los mensajes cumplen core/prosa en modo estricto.
• La promoción registra versión, compatibilidad y prueba de regresión.