SectionHeader

Cabecera de una sección dentro de una página: título, descripción, acciones y línea.

Cuándo usarlo

Props. title, description, actions, size (md · sm), divider, children (p. ej. Tabs o una búsqueda). Título text-lg-semibold (text-md en sm), descripción text-sm en text-tertiary.

Uso. Páginas de ajustes y formularios largos: una cabecera por grupo de campos.

Detalles. Funciona sin JavaScript. El título es un <h2>, por debajo del <h1> de PageHeader.

Ejemplos

Contactos

Personas y empresas con las que tratas.

Preferencias

Se aplican a todas las apps de la suite.

Props

Prop	Tipo	Por defecto	Descripción
`title`obligatoria	`ReactNode`	—	Título de la sección (`<h2>`): `text-lg` semibold, `text-md` en `sm`.
`description`	`ReactNode`	—	Una frase en `text-tertiary` bajo el título.
`actions`	`ReactNode`	—	Botones a la derecha: la acción principal, la última.
`size`	`"sm" · "md"`	`md`	Tamaño del título.
`divider`	`boolean`	`true`	Línea inferior en `border-secondary`.
`children`	`ReactNode`	—	Lo que va bajo el título, como unas `Tabs` o una búsqueda.
`className`	`string`	—

Código

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

export default function Page() {
	return (
		<>
			<SectionHeader
				title="Contactos"
				description="Personas y empresas con las que tratas."
				actions={<Button size="sm" iconLeading="plus">Nuevo contacto</Button>}
			/>
		</>
	);
}

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

<SectionHeader
	title="Contactos"
	description="Personas y empresas con las que tratas."
	actions={<Button size="sm" iconLeading="plus">Nuevo contacto</Button>}
/>