17/Contenido

Empty state

Estado vacío con icono, texto y acciones para cuando una lista o búsqueda no tiene resultados.

Con acción

Aún no hay facturas

Cuando emitas tu primera factura aparecerá aquí con su estado y fecha.

HTML

<div class="cb-empty">
  <div class="cb-empty__icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M22 12h-6l-2 3h-4l-2-3H2"/><path d="M5.5 5h13L22 12v7H2v-7z"/></svg></div>
  <h3 class="cb-empty__title">Aún no hay facturas</h3>
  <p class="cb-empty__text">Cuando emitas tu primera factura aparecerá aquí con su estado y fecha.</p>
  <div class="cb-empty__actions"><a href="#" class="cb-btn cb-btn--primary">Crear factura</a><a href="#" class="cb-btn cb-btn--outline">Importar</a></div>
</div>

Clases y modificadores

Clase	Descripción
`.cb-empty`	Caja con borde punteado y contenido centrado.
`.cb-empty__icon`	Icono enmarcado.
`.cb-empty__title`, `.cb-empty__text`	Título y explicación.
`.cb-empty__actions`	Botones.

Accesibilidad

Si el estado vacío aparece después de filtrar, anúncialo con una región aria-live.