Shared/Section Heading

Section Heading

Encabezado de página y sección con variantes de tamaño (lg / sm), alineación, slot de breadcrumbs y botón de retroceso opcionales. Fiel al sistema de diseño Figma (nodo 382:3700).

Base — Large

Variante page-level estándar. CTAs alineados a la derecha de la fila del heading.

Inicio

Resumen de datos desde el 1 de enero al 5 de mayo del 2026.

Base — Large con overline

Muestra el label de content-type encima del heading cuando se pasa la prop contentType.

Módulo

Gestión de Obras

Administrá el avance, costos y equipos de cada obra desde un solo lugar.

Breadcrumbs — Large

Renderiza el slot de breadcrumbs encima de la fila del heading.

Detalle de Obra

Vista completa del estado, hitos y equipo de la obra seleccionada.

Base — Small

Variante compacta para sub-secciones dentro de una página. CTAs apilados debajo.

Hitos

Etapas clave registradas para esta obra.

Back — Small

Incluye un botón circular de retroceso a la izquierda del heading.

Editar Obra

Modificá los datos generales de la obra seleccionada.

Mínimo

Solo heading obligatorio; todas las demás props son opcionales.

Configuración

Props

Interfaz pública del componente SectionHeading.

Prop	Tipo	Default	Descripción
`heading`	`string`	`—`	Texto principal del heading. Requerido.
`description`	`string`	`undefined`	Subtítulo / descripción debajo del heading.
`contentType`	`string`	`undefined`	Label overline encima del heading. Solo visible en `type="base"` + `size="lg"`.
`type`	`"base" \| "breadcrumbs" \| "back"`	`"base"`	Variante de layout. `base` estándar, `breadcrumbs` con slot de migas, `back` con botón circular de retroceso.
`size`	`"lg" \| "sm"`	`"lg"`	`lg` para encabezados de página con CTAs inline. `sm` para sub-secciones con CTAs apilados.
`actions`	`ReactNode`	`undefined`	Slot de CTA — renderizá uno o más botones aquí.
`breadcrumbs`	`ReactNode`	`undefined`	Slot de breadcrumbs. Solo aplica con `type="breadcrumbs"`.
`onBack`	`() => void`	`undefined`	Callback del botón de retroceso. Solo aplica con `type="back"`.
`className`	`string`	`undefined`	Clases Tailwind extra sobre el contenedor raíz.

Uso

Importá SectionHeading desde @repo/ui y pasale al menos el prop heading.

import { SectionHeading } from '@repo/ui';
import { Button } from '@repo/ui';
import { Download } from '@repo/icons';

// Variante page-level con CTAs
<SectionHeading
  heading="Inicio"
  description="Resumen de datos desde el 1 de enero al 5 de mayo del 2026."
  actions={
    <Button variant="outline">
      <Download className="size-4" />
      Exportar datos
    </Button>
  }
/>

// Con overline label
<SectionHeading
  heading="Gestión de Obras"
  contentType="Módulo"
  description="Administrá el avance, costos y equipos de cada obra."
/>

// Con breadcrumbs
<SectionHeading
  type="breadcrumbs"
  heading="Detalle de Obra"
  breadcrumbs={<MyBreadcrumbs />}
/>

// Sub-sección pequeña con botón de retroceso
<SectionHeading
  type="back"
  size="sm"
  heading="Editar Obra"
  onBack={() => router.back()}
/>