Empty Message

1.2.4

El patrón Empty message se utiliza para informar al usuario que no hay datos disponibles en una sección de la interfaz. Su función principal es brindar contexto, comunicar el estado vacío de forma clara, y guiar al usuario hacia la acción más relevante para resolver esa situación. Es clave para evitar confusión, mantener el foco y fomentar la productividad, especialmente al filtrar o después de eliminar contenido.

With icon

With illustration

import React from "react";
import { EmptyMessage } from "@nimbus-ds/patterns";
import { RedoIcon, SearchIcon } from "@nimbus-ds/icons";
import { Icon, Link } from "@nimbus-ds/components";

const Example: React.FC = () => (
  <EmptyMessage
    title="This is an empty message component."
    text="This component has an icon."
    icon={<SearchIcon size={32} />}
    actions={
      <Link appearance="primary">
        <Icon color="currentColor" source={<RedoIcon />} />
        Reload page
      </Link>
    }
  />
);

export default Example;

Implementación

Instalá el componente via terminal.

npm install @nimbus-ds/empty-message

Empty message

Cuándo usar

Al cargar una sección sin resultaos o sin contenido.
Cuando una búsqueda o filtro aplicado no devuelve resultados.
Luego de eliminar todos los ítems de una lista.

Cuándo no usar

Como llamada a la acción para comenzar un flujo (por ejemplo, "Crear producto") en esos casos utilizar Initial Screen.
No usar cuando el contenido aún está cargando: en ese caso usar un skeleton o loading spinner.
Evitarlo si ya hay contenido visible en pantalla y no hay pérdida de contexto.

Criterios de usabilidad y productividad

Foco en la acción principal: guiar al usuario con un CTA destacado para completar el flujo esperado.
Claridad contextual: explicar por qué no hay contenido y qué hacer al respecto.
Reducción de fricción: evitar que el usuario tenga que adivinar el próximo paso.

Accesibilidad

Proveer texto visible y legible que explique claramente el estado.
Garantizar que el botón o CTA tenga foco visible y sea navegable por teclado.
Usar roles y ARIA labels adecuados (role="status" o aria-live="polite") si el contenido cambia dinámicamente.
Áreas táctiles adecuadas en dispositivos mobiles (mínimo 44x44px).

Anatomía

Un Empty message incluye los siguientes elementos:

Ilustración o ícono (opcional)
Título
Descripción
Acción principal (Button o link)

Dependencias

Text
Icon
Button
Link

Variantes

With icon: Uso recomendado para resultados de búsqueda vacíos o filtrado sin resultados visibles. Mensaje conciso con una única acción disponible (principalmente "recargar pagina o borrar filtros")
With ilustration: Uso recomendado para errores de carga o sistema que requieren mayor contexto informativo para el usuario. Mensaje conciso con una dos acciones disponibles.

Do and Don'ts

✅ Do

Usar títulos cortos y con foco en la resolución del problema.
Complementar con una descripción breve que anticipe el próximo paso.
Incluir ilustración o ícono representativo cuando sea posible.
Priorizar una sola acción clara y visible.

❌ Don't

No dejar la pantalla completamente vacía.
No mostrar múltiples acciones que compitan entre sí.
No usar jerga o explicaciones vagas ("No hay nada").
No duplicar el mensaje si el contexto ya es claro.

Props

Additional props are passed to the <EmptyMessage> element. See div docs for a list of props accepted by the <EmptyMessage> element.

EmptyMessage

Name	Type	Description
illustration	React.ReactNode	Optional node that contains an illustration for the component. Will stack vertically on mobile and horizontally on desktop.
icon	React.ReactNode	Optional icon to display on top of the text.
title*	string	Title of the component.
text	string	Optional content text for additional context.
actions	React.ReactNode	Optional node to showcase buttons or actions.