Trabalhar com imagens de estado vazio com tema

  • Versão de lançamento: Australia
  • Atualizado 12 de mar. de 2026
  • 3 min. de leitura

    • Adicione imagens de estado vazio com tema para personalizar estados vazios e melhorar a experiência do usuário. os estados vazios incluem orientação ou ações para que os usuários adicionem ou criem conteúdo.

    Quando um componente ou uma parte do seu Next Experience a página da web não contém dados, uma imagem de estado vazia é exibida. As imagens de estado vazio podem ser adaptadas a temas e se adaptam às cores do tema da sua instância.

    Figura 1. Imagem de estado vazio
    Imagem de estado vazio de dados não disponível.

    Há 12 tipos de imagem de estado vazio disponíveis, cada uma incluindo uma versão pequena, média e grande. Ao criar um tema usando Construtor de temas Um registro de Imagens de estilos de UX é criado. No entanto, o registro está vazio. Nesse caso, o tema usa como padrão imagens com tema de estado vazio do sistema base. Se você optar por substituir essas imagens, consulte Personalize imagens de estado vazio que podem ser selecionadas para o tema.

    Você pode inserir uma imagem de estado vazia em sua experiência personalizada usando o componente Ilustração em Construtor de IU. O componente de ilustração exibe todas as imagens de estado vazias disponíveis. Para obter mais informações sobre o componente de ilustração, consulte Estado vazio do sistema de design do Horizon .

    Você também pode adicionar imagens personalizadas usando o componente Ilustração personalizada em Construtor de IU.

    Imagem de estado vazio passível de tema com ganchos de tema

    As imagens a seguir representam a imagem de estado vazio Sem resultados de pesquisa junto com os ganchos de tema necessários para cada variação.

    Figura 2. Nenhum resultado de pesquisa (destaque sólido)
    Imagem de estado vazio sem resultados de pesquisa, variação sólida de destaque. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_interactive-1 .

    Figura 3. Nenhum resultado de pesquisa (contorno de acento)
    Imagem de estado vazio sem resultados de pesquisa, variação de contorno de destaque. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_interactive-3 .

    Figura 4. Nenhum resultado de pesquisa (contornos sutis)
    Imagem de estado vazio nos resultados da pesquisa, variação de contornos sutis. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_border-secondary .

    Figura 5. Nenhum resultado de pesquisa (detalhe escuro do assunto)
    Imagem de estado vazio sem resultados de pesquisa, variação de detalhes escuros do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_border-terciário .

    Figura 6. Nenhum resultado da pesquisa (detalhe da luz do assunto)
    Imagem de estado vazio, variação de detalhe de luz do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_background-secondary .

    Figura 7. Nenhum resultado de pesquisa (preenchimento de assunto)
    Nenhuma imagem de estado vazio de resultados de pesquisa, variação de preenchimento do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_background-primary .

    Figura 8. Nenhum resultado de pesquisa (resumo do assunto)
    Nenhuma imagem de estado vazio nos resultados da pesquisa, variação do contorno do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_border-secondary .

    Figura 9. Nenhum resultado de pesquisa (sombras de assunto)
    Imagem de estado vazio sem resultados de pesquisa, variação de sombras do assunto. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.

    O gancho de tema necessário para esta variação é now-color_border-secondary .

    Tokens do modo de luz de estado vazio

    Figura 10. Imagem de estado vazio do objeto principal
    Imagem de estado vazio do objeto principal. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio do objeto principal.
    • now-illustration--empty-state--main-object--outline
    • now-illustration--empty-state--main-object--fill
    Figura 11. Imagem de estado vazio do objeto primário
    Imagem de estado vazio do objeto primário. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio do objeto primário.
    • now-illustration--empty-state--primary-object--outline
    • now-illustration--empty-state--primary-object--primary-fill
    • now-illustration--empty-state--primary-object--terciário-fill
    • now-illustration--empty-state--primary-object--main-detail
    • now-illustration--empty-state--primary-object--detalhe
    • now-illustration--empty-state--primary-object--shadow
    Figura 12. Imagem de estado vazio do objeto terciário
    Imagem de estado vazio do objeto terciário. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio do objeto terciário.
    • now-illustration--empty-state--terciário-object--contorno
    • now-illustration--empty-state--terciário-object--primary-fill
    • now-illustration--empty-state--terciário-object--terciário-fill
    • now-illustration--empty-state--terciário-object--main-detail
    • now-illustration--empty-state--terciário-object--detalhe
    • now-illustration--empty-state--terciário-objeto--sombra
    Figura 13. Imagem de estado vazio do plano de fundo
    Imagem de estado vazio do plano de fundo. Para obter a descrição do texto, consulte as informações do gancho do tema a seguir.
    Os ganchos de tema usados para substituir a imagem de estado vazio do plano de fundo.
    • now-illustration--empty-state--background--lines
    • now-illustration--empty-state--background--terciário-lines
    • now-illustration--empty-state--background--object-outline
    • now-illustration--empty-state--background--object-detail
    • now-illustration--empty-state--background--object-shadow
    • now-illustration--empty-state--background--object-fill

    Fallbacks do modo de luz de estado vazio

    Tabela 1. Declarações de estilo de fallback do modo claro de estado vazio
    Objeto Declaração de estilo
    Objeto principal 
    
 .main-object--outline {
  fill:rgb(var(--empty-state--main-object--outline),
      var(--main-object--outline), var(--now-color--interactive-3), 51,53,123);
}
    		 
    
 .main-object--fill {
  fill:rgb(var(--empty-state--main-object--fill),
      var(--main-object--fill), var(--now-color--interactive-1), 144,146,213);
}
    Objeto primário 
    
 .primary-object--outline {
  fill:rgb(var(--empty-state--primary-object--outline),
      var(--primary-object--outline), var(--now-color--border--secondary),
    176,181,191);
}
    		 
    
 .primary-object--primary-fill {

      fill:rgb(var(--empty-state--primary-object--primary-fill),
      var(--primary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .primary-object--tertiary-fill {

      fill:rgb(var(--empty-state--primary-object--tertiary-fill),
      var(--primary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .primary-object--main-detail {

      fill:rgb(var(--empty-state--primary-object--main-detail), var(--primary-object--main-detail),
      var(--now-color--border--secondary), 176,181,191);
}
    		 
    
 .primary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .primary-object--shadow {
  fill:rgb(var(--empty-state--primary-object--shadow),
      var(--primary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    Objeto terciário 
    
 .tertiary-object--outline {
  fill:rgb(var(--empty-state--tertiary-object--outline),
      var(--tertiary-object--outline), var(--now-color--border--secondary), 176,181,191);
}
      
    
 .tertiary-object--primary-fill {

      fill:rgb(var(--empty-state--tertiary-object--primary-fill),
      var(--tertiary-object--primary-fill), var(--now-color--background--primary),
      255,255,255);
}
    		 
    
 .tertiary-object--tertiary-fill {

      fill:rgb(var(--empty-state--tertiary-object--tertiary-fill),
      var(--tertiary-object--tertiary-fill), var(--now-color--background--secondary),
      246,246,248);
}
    		 
    
 .tertiary-object--main-detail {

      fill:rgb(var(--empty-state--tertiary-object--main-detail),
      var(--tertiary-object--main-detail), var(--now-color--border--secondary),
      176,181,191);
}
    		 
    
 .tertiary-object--detail {
  fill:rgb(var(--empty-state--primary-object--detail ),
      var(--primary-object--detail ), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .tertiary-object--shadow {
  fill:rgb(var(--empty-state--tertiary-object--shadow),
      var(--tertiary-object--shadow), var(--now-color--background--tertiary),
    228,230,234);
}
    Objeto de plano de fundo 
    
 .background--lines {
  fill:rgb(var(--empty-state--background--lines),
      var(--background--lines), var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--tertiary-lines {

      fill:rgb(var(--empty-state--background--tertiary-lines), var(--background--tertiary-lines),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-outline {

      fill:rgb(var(--empty-state--background--object-outline), var(--background--object-outline),
      var(--now-color--border--tertiary), 211,214,220);
}
    		 
    
 .background--object-detail {
  fill:rgb(var(--empty-state--background--object-detail),
      var(--background--object-detail), var(--now-color--border--tertiary),
    211,214,220);
}
    		 
    
 .background--object-shadow {
  fill:rgb(var(--empty-state--background--object-shadow),
      var(--background--object-shadow), var(--now-color--background--tertiary),
      228,230,234);
}
    		 
    
 .background--object-fill {
  fill:rgb(var(--empty-state--background--object-fill),
      var(--background--object-fill), var(--now-color--background--primary),
    255,255,255);
}