EmptyState
Estado vazio com ícone, título, descrição e ação.
📋
Nenhuma cobrança encontrada
Crie sua primeira cobrança para começar a receber pagamentos.
Instalação
npx @kobana/ui add empty-stateDependências instaladas automaticamente: button (shadcn/ui)
Importação
import { EmptyState } from "@/components/kobana/empty-state"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
icon | ReactNode | — | Ícone ou emoji |
title | string | — | Título |
description | string | — | Descrição |
action | { label: string; onClick: () => void; icon?: ReactNode } | — | Botão CTA |
className | string | — | Classes adicionais |
Uso
<EmptyState
icon={<FileX className="h-10 w-10" />}
title="Nenhuma cobrança encontrada"
description="Crie sua primeira cobrança para começar a receber pagamentos."
action={{
label: "Nova Cobrança",
onClick: () => navigate("/charges/new"),
icon: <Plus className="h-4 w-4" />,
}}
/>