Capítulo 62 de 108

Empty

Core Idea

Componente padronizado para estados vazios (sem dados, 404, offline, sem notificações), combinando ícone/avatar, título, descrição e ações em uma estrutura consistente.

Key Concepts

  • EmptyMedia variant="icon" | "default": "icon" estiliza um container circular/quadrado para ícone; "default" é usado para conteúdo livre como Avatar ou grupo de avatares.
  • Composição: Empty > EmptyHeader (EmptyMedia, EmptyTitle, EmptyDescription), EmptyContent.
  • EmptyContent: área para ações (botões, InputGroup, links) abaixo do header.
  • Elementos extras (ex. um Button variant="link") podem ficar fora de EmptyContent, direto como filho de Empty.

Code Examples

<Empty>
  <EmptyHeader>
    <EmptyMedia variant="icon">
      <IconFolderCode />
    </EmptyMedia>
    <EmptyTitle>No Projects Yet</EmptyTitle>
    <EmptyDescription>
      You haven't created any projects yet. Get started by creating your first project.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent className="flex-row justify-center gap-2">
    <Button>Create Project</Button>
    <Button variant="outline">Import Project</Button>
  </EmptyContent>
  <Button variant="link" render={<a href="#" />} className="text-muted-foreground" size="sm" nativeButton={false}>
    Learn More <ArrowUpRightIcon />
  </Button>
</Empty>
  • O que demonstra: estado vazio completo com duas ações primárias e um link secundário fora do EmptyContent.
<Empty>
  <EmptyHeader>
    <EmptyTitle>404 - Not Found</EmptyTitle>
    <EmptyDescription>
      The page you're looking for doesn't exist. Try searching for what you need below.
    </EmptyDescription>
  </EmptyHeader>
  <EmptyContent>
    <InputGroup className="sm:w-3/4">
      <InputGroupInput placeholder="Try searching for pages..." />
      <InputGroupAddon><SearchIcon /></InputGroupAddon>
      <InputGroupAddon align="inline-end"><Kbd>/</Kbd></InputGroupAddon>
    </InputGroup>
  </EmptyContent>
</Empty>
  • O que demonstra: página 404 usando InputGroup de busca dentro de EmptyContent, sem EmptyMedia.

Reference Tables

Empty

PropTypeDefault
classNamestring

EmptyMedia

PropTypeDefault
variant"default" | "icon"default

EmptyHeader / EmptyTitle / EmptyDescription / EmptyContent

PropTypeDefault
classNamestring

Anti-patterns

  • Colocar Avatar dentro de EmptyMedia variant="icon": use variant="default" para avatar/imagem; "icon" é estilizado especificamente para ícones simples.
  • Empty sem EmptyDescription: título sozinho raramente comunica a ação esperada do usuário.

Key Takeaways

  1. EmptyMedia tem dois modos visuais distintos: icon (ícone simples) vs default (avatar, avatar group, imagem).
  2. EmptyContent é o lugar certo para CTAs; conteúdo secundário (links "saiba mais") pode ficar fora dele.
  3. Empty é reaproveitável para 404, "sem notificações", "offline", "sem resultados de busca" — mesma estrutura, conteúdo diferente.
  4. Use border border-dashed ou bg-muted/30 no Empty para variações visuais (outline, tela cheia).

Connects To

  • Spinner (ch059): usado dentro de EmptyMedia como estado de "processando" em vez de vazio.
  • Avatar (ch063): EmptyMedia variant="default" frequentemente envolve um Avatar ou AvatarGroup.
  • Item (ch071): ambos seguem o mesmo padrão de composição Header/Content/Media do design system Base UI.
AnteriorBadgePróximoAvatar