Empty · Eyes

Nenhum registro encontrado

Não há nada por aqui ainda.

import { Empty } from "@vincisys/eyeson";
import { Inbox } from "lucide-react";

export function EmptyBasicDemo() {
	return (
		<Empty
			icon={<Inbox size={40} />}
			title="Nenhum registro encontrado"
			description="Não há nada por aqui ainda."
		/>
	);
}

Instalação

import { Empty } from '@vincisys/eyeson';

Uso

import { Empty } from '@vincisys/eyeson';
import { Inbox } from 'lucide-react';

export function Example() {
return (
  <Empty
    icon={<Inbox size={40} />}
    title="Nenhum registro encontrado"
    description="Não há nada por aqui ainda."
  />
);
}

Exemplos

Básico

Nenhum registro encontrado

Não há nada por aqui ainda.

Visualizar

import { Empty } from "@vincisys/eyeson";
import { Inbox } from "lucide-react";

export function EmptyBasicDemo() {
	return (
		<Empty
			icon={<Inbox size={40} />}
			title="Nenhum registro encontrado"
			description="Não há nada por aqui ainda."
		/>
	);
}

Resultado de busca vazio

Combine com um Input de busca — a descrição pode referenciar o termo buscado para deixar claro por que a lista está vazia.

Buscar motorista

Nenhum motorista encontrado

Não encontramos resultados para "caminhão azul". Tente ajustar os filtros.

Visualizar

import { useState } from "react";
import { Empty, Input } from "@vincisys/eyeson";
import { SearchX } from "lucide-react";

export function EmptySearchDemo() {
	const [query, setQuery] = useState('caminhão azul');

	return (
		<div className="flex w-full max-w-sm flex-col gap-3">
			<Input
				label="Buscar motorista"
				value={query}
				onChange={(value) => setQuery(value)}
			/>
			<Empty
				size="sm"
				icon={<SearchX size={32} />}
				title="Nenhum motorista encontrado"
				description={`Não encontramos resultados para "${query}". Tente ajustar os filtros.`}
			/>
		</div>
	);
}

Com ação

Use a prop action para dar ao usuário um próximo passo claro (geralmente um Button).

Nenhuma rota cadastrada

Cadastre a primeira rota para começar a despachar entregas.

Visualizar

import { Button, Empty } from "@vincisys/eyeson";
import { Route } from "lucide-react";

export function EmptyActionDemo() {
	return (
		<Empty
			icon={<Route size={40} />}
			title="Nenhuma rota cadastrada"
			description="Cadastre a primeira rota para começar a despachar entregas."
			action={<Button text="Criar rota" />}
		/>
	);
}

Tamanhos

size aceita sm, md (padrão) e lg — use sm dentro de cards e lg para uma página inteira vazia.

Nenhum veículo na frota

Adicione um veículo para começar.

Nenhum motorista cadastrado

Cadastre motoristas para atribuir a rotas e entregas.

Visualizar

import { Button, Empty } from "@vincisys/eyeson";
import { Truck, Users } from "lucide-react";

export function EmptyVariantsDemo() {
	return (
		<div className="flex w-full flex-col gap-4">
			<Empty
				size="sm"
				icon={<Truck size={28} />}
				title="Nenhum veículo na frota"
				description="Adicione um veículo para começar."
			/>
			<Empty
				size="lg"
				icon={<Users size={48} />}
				title="Nenhum motorista cadastrado"
				description="Cadastre motoristas para atribuir a rotas e entregas."
				action={<Button variant="outline" text="Convidar motorista" />}
			/>
		</div>
	);
}