Nebula UI
Introduction
IconLabelColorsTypography
Button
AlertBadgeBannerLoaderProgress BarEmptyTooltip
HeaderNavbarSidebarTabsPaginationBreadcrumbSeparator
AvatarModule BoxChartsColor CardsTableSliderCalendar
Text InputPassword InputTextarea InputCheckboxSwitchRadiogroupSelectorSearch BarDatepickerFile Upload
DropdownPopoverDialogTourDrawerAccordion
Overview
Design Themes

Nebula UI Library

v1.0.0

Component

Header

Disponible

Header es un componente estructural que introduce el contenido principal de una pantalla. Presenta un título obligatorio, una descripción opcional y una acción opcional alineada a la derecha para tareas contextuales.

Detalles de tus cobros

Podés consultar los detalles de los cobros que hacés con Nave y descargar resúmenes personalizados.

Title (required) · Description (optional) · Right Action (optional)

Import

Importá el componente Header y los estilos base de la librería.

TypeScript
1import 'nave-ui-library/styles.css'
2import { Header } from 'nave-ui-library/react'

Usage

Uso mínimo con título obligatorio.

Detalles de tus cobros

Variants

Header permite dos tamaños para ajustar densidad y tipografías según contexto.

Desktop

Detalles de tus cobros

Podés consultar los detalles de los cobros que hacés con Nave y descargar resúmenes personalizados.

Responsive

Detalles de tus cobros

Podés consultar los detalles de los cobros que hacés con Nave y descargar resúmenes personalizados.

With Action

Acción contextual opcional en el extremo derecho del encabezado.

Detalles de tus cobros

Podés consultar los detalles de los cobros que hacés con Nave y descargar resúmenes personalizados.

API Reference

Props disponibles para construir encabezados escalables y reutilizables.

PropTypeDefaultDescription
titlereq
ReactNode—Título principal del Header.
description
ReactNode—Descripción opcional con contexto adicional.
action
ReactNode—Acción opcional alineada a la derecha.
size
'desktop' | 'mobile'desktopTamaño visual del Header.
descriptionMaxLines
number—Límite de líneas para truncar descripción.
className
string—Clases adicionales del contenedor raíz.

Registry

Ver configuración técnica del registro
JSON
1{
2  "name": "Header",
3  "description": "Componente estructural para introducir el contenido principal de una página con título, descripción y acción opcional.",
4  "component": "Header",
5  "files": [
6    "components/base/navegation/Header.tsx"
7  ],
8  "dependencies": [
9    "react"
10  ],
11  "props": {
12    "title": {
13      "type": "React.ReactNode",
14      "required": true,
15      "description": "Título principal del header."
16    },
17    "description": {
18      "type": "React.ReactNode",
19      "description": "Texto descriptivo opcional que aporta contexto a la vista."
20    },
21    "action": {
22      "type": "React.ReactNode",
23      "description": "Acción opcional ubicada en el extremo derecho del header."
24    },
25    "size": {
26      "type": "'desktop' | 'mobile'",
27      "default": "desktop",
28      "description": "Define densidad y tipografías para desktop o mobile."
29    },
30    "descriptionMaxLines": {
31      "type": "number",
32      "description": "Cantidad máxima de líneas para truncar la descripción."
33    },
34    "className": {
35      "type": "string",
36      "description": "Clases adicionales para el contenedor raíz."
37    }
38  },
39  "examples": [
40    "Header básico",
41    "Header con descripción",
42    "Header con acción"
43  ]
44}