Empty

Feedbackserver safe

Estado vazio composto por partes (media, título, descrição, conteúdo), para ausência de resultado ou de dado.

Carregando

Instalação

Recebe correções por update de versão. O caminho recomendado.

npm i @trdr/ui

import { Empty } from "@trdr/ui/empty"

Uso

import { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@trdr/ui/empty"

export function Exemplo() {
  return <Empty />
}

Variantes

GrupoValoresPadrão
variant
defaulticon
default

Props

EmptyPropsestende React.HTMLAttributes<HTMLDivElement>
EmptyHeaderPropsestende React.HTMLAttributes<HTMLDivElement>
EmptyMediaPropsestende React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof emptyMediaVariants>
EmptyTitlePropsestende React.HTMLAttributes<HTMLDivElement>
EmptyDescriptionPropsestende React.HTMLAttributes<HTMLDivElement>
EmptyContentPropsestende React.HTMLAttributes<HTMLDivElement>

Quando usar

Use o Empty sempre que uma area da tela que normalmente mostra dado nao tem nada para mostrar ainda: uma busca sem resultado, uma lista de alertas recem criada, uma carteira sem posicao aberta. Ele nao existe no Hub legado, cada tela tratava o vazio a propria maneira (ou nao tratava). Combine EmptyContent com um Button quando existe uma acao clara para sair do estado vazio (criar o primeiro alerta, limpar o filtro que zerou o resultado).

Quando nao usar

Nao use Empty para erro de carregamento (a requisicao falhou, nao e que o resultado e vazio): esse caso e do Alert, porque o usuario precisa entender que algo deu errado, nao que simplesmente nao ha dado. Nao use Empty para um estado de carregamento em andamento: enquanto o dado ainda nao chegou, use Skeleton; Empty e o estado final de "nao ha nada aqui", nao a espera por ele.

Anatomia

  • Empty (data-slot="empty"): a raiz, centraliza o conteudo. Nao desenha caixa nenhuma por padrao: se a tela pede uma moldura tracejada ao redor do estado vazio, adicione className="border border-border-subtle" no consumo (o traco em si ja vem pronto no componente, so falta a largura e a cor da borda para aparecer).
  • EmptyHeader (data-slot="empty-header"): agrupa midia, titulo e descricao, centralizados.
  • EmptyMedia (data-slot="empty-media"): o icone do estado vazio. Variante default (icone solto, sem fundo) ou icon (moldura quadrada com fundo, para dar mais peso visual).
  • EmptyTitle (data-slot="empty-title"): o titulo curto do estado.
  • EmptyDescription (data-slot="empty-description"): o texto de apoio, explicando o motivo do vazio ou o que fazer a seguir.
  • EmptyContent (data-slot="empty-content"): area abaixo do header para uma acao, tipicamente um Button.

Acessibilidade

Empty e suas partes sao <div> sem papel semantico proprio: o titulo deve ser texto real e legivel (nao so o icone), porque e ele que comunica a condicao para quem usa leitor de tela. Icones em EmptyMedia sao sempre decorativos aqui (o texto ja diz tudo que importa), entao leve aria-hidden="true" neles. Quando EmptyContent traz um Button, ele segue as proprias regras de acessibilidade do Button normalmente, sem nada especial herdado do Empty.

Slots e tokens

Todo elemento renderizado carrega um data-slot para estilizar partes internas sem depender de classe da biblioteca. Os tokens listados são extraídos do código fonte.

[data-slot="empty"][data-slot="empty-content"][data-slot="empty-description"][data-slot="empty-header"][data-slot="empty-media"][data-slot="empty-title"]
9 tokens usados
bg-surface-secondarybg-transparentborder-dashedtext-b3text-centertext-content-primarytext-content-secondarytext-content-tertiarytext-h6