PageHeader

Cabecera de página de app: migas, título, descripción, acciones y línea inferior.

Cuándo usarlo

Props. breadcrumbs, title, description, actions, children (p. ej. Tabs), divider. Título display-sm-semibold (30/38, Bricolage Grotesque); descripción text-md-regular en text-tertiary. La acción principal va la última, a la derecha.

Detalles. Funciona sin JavaScript. Es un <header> con el título en <h1>: uno por página. Las migas son un Breadcrumbs. La línea inferior sale por defecto; divider={false} la quita.

Ejemplos

Gastos

Controla lo que entra y lo que sale.

Props

Prop	Tipo	Por defecto	Descripción
`title`obligatoria	`ReactNode`	—	Título de la página (`<h1>`), en Bricolage Grotesque 30/38 semibold.
`description`	`ReactNode`	—	Una frase en `text-tertiary` bajo el título.
`breadcrumbs`	`BreadcrumbItem[]`	—	Ruta encima del título (`Breadcrumbs`).
`actions`	`ReactNode`	—	Botones a la derecha: la acción principal, la última.
`children`	`ReactNode`	—	Lo que va bajo el título, como unas `Tabs`.
`divider`	`boolean`	`true`	Línea inferior en `border-secondary`.
`className`	`string`	—

Código

import { PageHeader } from "@jotis-me/react";

export default function Page() {
	return (
		<>
			<PageHeader
				breadcrumbs={[{ label: "Inicio", href: "/", icon: "home-line" }, { label: "Pecunia" }]}
				title="Gastos"
				description="Controla lo que entra y lo que sale."
				actions={<Button iconLeading="plus">Nuevo gasto</Button>}
			/>
		</>
	);
}

---
import { PageHeader } from "@jotis-me/react";
---

<PageHeader
	breadcrumbs={[{ label: "Inicio", href: "/", icon: "home-line" }, { label: "Pecunia" }]}
	title="Gastos"
	description="Controla lo que entra y lo que sale."
	actions={<Button iconLeading="plus">Nuevo gasto</Button>}
/>