EmptyState

EmptyState comunica por que uma região está vazia e o que fazer em seguida. Ele é anunciado como role="status" para que tecnologias assistivas saibam que está reportando uma condição corrente.

import { EmptyState } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
import { FolderPlus } from 'lucide-react';

export default function EmptyStateDefault() {
  return (
    <EmptyState
      icon={<FolderPlus />}
      title="Nenhum projeto ainda"
      description="Crie seu primeiro projeto para começar a colaborar com a equipe."
      actions={<Button>Criar projeto</Button>}
    />
  );
}

Uso

import { EmptyState } from '@uranus-workspace/blocks';
import { Button } from '@uranus-workspace/design-system';
import { FolderPlus } from 'lucide-react';

<EmptyState
  icon={<FolderPlus aria-hidden />}
  title="Nenhum projeto ainda"
  description="Crie seu primeiro projeto para começar a colaborar com sua equipe."
  actions={
    <>
      <Button variant="outline">Saiba mais</Button>
      <Button>Novo projeto</Button>
    </>
  }
/>

Diretrizes

• Sempre ofereça ao usuário uma próxima ação — um EmptyState sem actions é um beco sem saída.
• A descrição explica por que não há nada aqui, não o que estará aqui. ("Crie seu primeiro projeto", não "Seus projetos aparecerão aqui".)
• Mantenha o ícone decorativo (aria-hidden) — o título carrega o peso semântico.