Estado vacío

Propuesto2026-10-02 · Propuesto por el kit; falta la revisión del founder.

Cuando una lista o sección aún no tiene nada.

Vista · datos de ejemplo

Todavía no tienes guías

Cuando hagas tu primera guía de despacho aparecerá aquí. También puedes pedírsela a Kōdo desde la ficha de un cliente.

Anatomía

Icono del kit de 32 px
Título de 22 px
Texto corto que dice qué aparecerá
Acción principal y la opción de pedírselo a Kōdo

Sí

Explica qué hacer, en tú

No muestres tablas vacías ni ceros

HTML exacto

<section class="nu-vacio-bloque">
  <span class="nu-icono nu-vacio-bloque__icono" data-icono="nuevauno_packing_lists"></span>
  <h2 class="nu-vacio-bloque__titulo">Todavía no tienes guías</h2>
  <p class="nu-vacio-bloque__texto">Cuando hagas tu primera guía de despacho aparecerá aquí. También puedes pedírsela a Kōdo desde la ficha de un cliente.</p>
  <div class="nu-botones">
    <button type="button" class="nu-boton nu-boton--principal">Nueva guía →</button>
    <button type="button" class="nu-boton nu-boton--texto">Pedírsela a Kōdo</button>
  </div>
</section>

Clases: .nu-vacio-bloque · Fragmento: snippets/empty-state.html