> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Encabezado

> Renderiza encabezados semánticos con tamaños visuales independientes.

## Resumen

`Heading` renderiza un `h2` de forma predeterminada. Usa `children` para su contenido, `level` para la estructura del documento y `size` para la apariencia.

**Light**

[Ejemplo de encabezado (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--display\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Ejemplo de encabezado (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--display\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-heading--display)

## Uso

Elige los niveles en el orden del documento. Un tamaño visual más pequeño no cambia el nivel anunciado por la tecnología de asistencia.

```tsx theme={null}
import { Heading } from 'twenty-ui/primitives/typography';

export const WorkspaceTitle = () => <Heading>Workspace settings</Heading>;
```

Los tamaños `xs`, `sm`, `md`, `lg`, `xl` y `xxl` usan los tokens de fuente correspondientes. Los tamaños más grandes usan `1.54rem` y `1.85rem`, respectivamente. Todos los tamaños mantienen un grosor seminegrita y una altura de línea de `1.1`. `Section.Header` y `Dialog.Title` aceptan los mismos valores de tamaño. Los encabezados no tienen margen exterior; su diseño circundante controla el espaciado.

## Color y composición

**Light**

[Tamaños y colores de los encabezados (light)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:light)

**Dark**

[Tamaños y colores de los encabezados (dark)](https://storybook.twenty.com/iframe.html?id=ui-typography-heading--catalog\&viewMode=story\&globals=colorScheme:dark)

[Open in Storybook](https://storybook.twenty.com/?path=/story/ui-typography-heading--catalog)

Usa `color="secondary"` para encabezados menos destacados. `tertiary` también está disponible, pero su contraste depende del tamaño de fuente, el tema y el fondo. Comprueba la legibilidad al usarlo.

Los atributos nativos, estilos, nombres de clase y refs se pasan al encabezado. Usa `render` para componer con un elemento o componente personalizado; ese elemento es responsable de preservar la semántica de los encabezados.

Para un encabezado con texto complementario o acciones, usa [Section](https://docs.twenty.com/es/ui/components/layout/section.md).

## Props

**color** `"primary" | "secondary" | "tertiary"` (default: primary)

Theme font color. Defaults to `primary`.

**level** `1 | 2 | 3 | 4 | 5 | 6` (default: 2)

Semantic heading level, from `h1` through `h6`. Does not change the visual size. Defaults to `2`.

**render** `ReactElement\<unknown, string | JSXElementConstructor\<any\>\> | ComponentRenderFn\<HTMLProps, \{\}\>`

Allows you to replace the component's HTML element
with a different tag, or compose it with another component.

Accepts a `ReactElement` or a function that returns the element to render.

**size** `"lg" | "md" | "sm" | "xl" | "xs" | "xxl"` (default: md)

Visual font size from `xs` through `xxl`, independent of the heading level. Uses the matching font token. Defaults to `md`.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.