Resumen
Heading renderiza un h2 de forma predeterminada. Usa children para su contenido, level para la estructura del documento y size para la apariencia.
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.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
Usacolor="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.
Props
"primary" | "secondary" | "tertiary"
predeterminado:"primary"
Theme font color. Defaults to
primary.1 | 2 | 3 | 4 | 5 | 6
predeterminado:"2"
Semantic heading level, from
h1 through h6. Does not change the visual size. Defaults to 2.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."lg" | "md" | "sm" | "xl" | "xs" | "xxl"
predeterminado:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.