EmptyState

El componente EmptyState se utiliza para comunicar de forma transparente que no hay datos ni contenido disponible para mostrar en un contexto determinado, reduciendo la incertidumbre y guiando al usuario hacia una acción posible.

Previsualización Rápida

No encontramos resultados

Probá ajustando los filtros de búsqueda o intentá con otros términos.

Propósito

Reducir la incertidumbre del usuario: Explicar de forma clara e inmediata por qué la pantalla o sección se encuentra vacía.
Aportar contexto explícito: Informar la causa concreta (sin datos creados, filtros sin coincidencias o errores de sistema).
Guiar hacia una acción posible: Ofrecer alternativas de navegación o recuperación cuando corresponda mediante botones de acción.

Anatomía del Componente

El componente se compone como una molécula con la siguiente estructura interna:

Paper (Booleano): Contenedor base tipo tarjeta con elevación sutil para enmarcar el estado.
Icon (Booleano): Elemento gráfico o ícono representativo decorativo en la parte superior.
Title (Obligatorio): Mensaje principal, claro, directo y conciso.
Body (Obligatorio): Texto explicativo de soporte que aporta contexto o pasos a seguir.
Botonera (Booleano): Contenedor opcional para albergar botones de acción.
Botón Primario (Booleano): Acción principal recomendada para resolver o salir del estado vacío.
Botón Secundario (Booleano): Acción alternativa de menor jerarquía.
Stroke (Booleano): Delimitador de borde opcional para añadir definición cuando se ubica sobre fondos blancos.

Sin movimientos registrados

Aún no realizaste operaciones en este período. Toca el botón para realizar tu primera transferencia.

Usos Recomendados y Guía de UX

Cuándo usar

Listados sin resultados: Búsquedas que no arrojan coincidencias.
Primer ingreso (Zero State): Cuando el usuario entra por primera vez a una funcionalidad que no tiene datos creados.
Filtros aplicados: Combinación de filtros de búsqueda que no devuelven registros.
Errores de sistema: Fallas temporales en servicios de Frontend (SE) o Backend (BE).

Cuándo NO usar

Reglas de Comportamiento para Botones

Estructura fija: No se permite alterar el orden, tamaño ni jerarquías de los botones dentro del EmptyState, ni tampoco agregar íconos adicionales a los botones.
Estado interactivo: Únicamente se permite modificar el estado funcional de los botones (Default, Disabled o Loader).

Layout y Alineación

Ancho Máximo: El contenido interno cuenta con un ancho máximo estricto para evitar que las líneas de texto resulten demasiado extensas, garantizando óptima legibilidad.
Alineación: El contenedor del EmptyState se alinea horizontal y verticalmente según el layout que la interfaz esté utilizando en la funcionalidad actual.
Caso de Permisos o Mantenimiento: Para pantallas completas de permisos insuficientes o mantenimiento del servicio, se debe utilizar el ancho total del layout (12 columnas).

Pautas de Accesibilidad

Navegación por Teclado: Si el componente contiene botones activos, estos deben tomar el foco secuencial mediante la tecla Tab en orden lógico.
Lector de Pantalla:
- El texto del título y cuerpo debe ser comprensible de forma autosuficiente sin requerir apoyo visual.
- La imagen o ícono superior es estrictamente decorativo y posee el atributo aria-hidden="true".
- Los botones deben ser anunciados semánticamente con sus respectivas etiquetas de acción.