Panoramica
Heading esegue il rendering di un h2 per impostazione predefinita. Usa children per il relativo contenuto, level per la struttura del documento e size per l’aspetto.
Utilizzo
Scegli i livelli nell’ordine del documento. Una dimensione visiva più piccola non modifica il livello annunciato dalla tecnologia assistiva.xs, sm, md, lg, xl e xxl utilizzano i token dei caratteri corrispondenti. Le dimensioni maggiori utilizzano rispettivamente 1.54rem e 1.85rem. Tutte le dimensioni mantengono un peso semigrassetto e un’interlinea di 1.1. Section.Header e Dialog.Title accettano gli stessi valori di dimensione. Le intestazioni non hanno margini esterni; la disposizione circostante gestisce la spaziatura.
Colore e composizione
Usacolor="secondary" per le intestazioni meno prominenti. È disponibile anche tertiary, ma il relativo contrasto dipende dalla dimensione del carattere, dal tema e dallo sfondo. Verifica la leggibilità quando lo usi.
Gli attributi nativi, gli stili, i nomi di classe e i ref vengono passati all’intestazione. Usa render per comporre con un elemento o componente personalizzato; tale elemento è responsabile di preservare la semantica dell’intestazione.
Per un’intestazione con testo di supporto o azioni, utilizza Section.
Props
"primary" | "secondary" | "tertiary"
predefinito:"primary"
Theme font color. Defaults to
primary.1 | 2 | 3 | 4 | 5 | 6
predefinito:"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"
predefinito:"md"
Visual font size from
xs through xxl, independent of the heading level. Uses the matching font token. Defaults to md.