PageHeader
Cabeçalho de página com título, breadcrumbs e ações.
Carregando...
Instalação
npx @kobana/ui add page-headerDependências instaladas automaticamente: breadcrumb, button (shadcn/ui)
Importação
import { PageHeader } from "@/components/kobana/page-header"Props
| Prop | Tipo | Default | Descrição |
|---|---|---|---|
title | string | — | Título da página |
description | string | — | Subtítulo/descrição |
breadcrumbs | BreadcrumbItem[] | — | Trail de navegação |
actions | ReactNode | — | Ações (botões) alinhados à direita |
backHref | string | — | URL para botão voltar |
className | string | — | Classes adicionais |
BreadcrumbItem
interface BreadcrumbItem {
label: string
href?: string // último item sem href = página atual
}Uso
<PageHeader
title="Cobranças"
description="Gerencie as cobranças do seu negócio"
breadcrumbs={[
{ label: "Dashboard", href: "/" },
{ label: "Cobranças" },
]}
actions={
<>
<Button variant="outline">Exportar</Button>
<Button>Nova Cobrança</Button>
</>
}
/>