Empty Message

1.2.4

O padrão Empty message é utilizado para informar ao usuário que não há dados disponíveis em uma seção da interface. Sua função principal é fornecer contexto, comunicar o estado vazio de forma clara, e guiar o usuário para a ação mais relevante para resolver essa situação. É fundamental para evitar confusão, manter o foco e fomentar a produtividade, especialmente ao filtrar ou depois de eliminar conteúdo.

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;

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/empty-message

Empty message

Quando usar

Ao carregar uma seção sem resultados ou sem conteúdo.
Quando uma busca ou filtro aplicado não retorna resultados.
Após eliminar todos os itens de uma lista.

Quando não usar

Como chamada à ação para começar um fluxo (por exemplo, "Criar produto") nesses casos utilizar Initial Screen.
Não usar quando o conteúdo ainda está carregando: nesse caso usar um skeleton ou loading spinner.
Evitá-lo se já há conteúdo visível na tela e não há perda de contexto.

Critérios de usabilidade e produtividade

Foco na ação principal: guiar o usuário com um CTA destacado para completar o fluxo esperado.
Claridade contextual: explicar por que não há conteúdo e o que fazer a respeito.
Redução de fricção: evitar que o usuário tenha que adivinhar o próximo passo.

Acessibilidade

Prover texto visível e legível que explique claramente o estado.
Garantir que o botão ou CTA tenha foco visível e seja navegável por teclado.
Usar roles e ARIA labels adequados (role="status" ou aria-live="polite") se o conteúdo muda dinamicamente.
Áreas táteis adequadas em dispositivos móveis (mínimo 44x44px).

Anatomia

Um Empty message inclui os seguintes elementos:

Ilustração ou ícone (opcional)
Título
Descrição
Ação principal (Button ou link)

Dependências

Text
Icon
Button
Link

Variantes

With icon: Uso recomendado para resultados de busca vazios ou filtrado sem resultados visíveis. Mensagem concisa com uma única ação disponível (principalmente "recarregar página ou apagar filtros")
With illustration: Uso recomendado para erros de carregamento ou sistema que requerem maior contexto informativo para o usuário. Mensagem concisa com duas ações disponíveis.

Do and Don'ts

✅ Do

Usar títulos curtos e com foco na resolução do problema.
Complementar com uma descrição breve que antecipe o próximo passo.
Incluir ilustração ou ícone representativo quando possível.
Priorizar uma só ação clara e visível.

❌ Don't

Não deixar a tela completamente vazia.
Não mostrar múltiplas ações que competem entre si.
Não usar jargão ou explicações vagas ("Não há nada").
Não duplicar a mensagem se o contexto já é 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.