Heading
Page and section title
name | type | default | description |
|---|---|---|---|
| align | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "-webkit-match-parent" | "center" | "end" | "justify" | "left" | "match-parent" | "right" | "start" | - | CSS property of textAlign |
| as | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "legend" | h1 | JSX element to render. |
| color | "inherit" | "initial" | "unset" | "none" | "accent" | "blue" | "green" | "yellow" | "red" | "orange" | "indigo" | "pink" | "purple" | "grey" | "accentActive" | "accentDim" | "accentPrimary" | "accentBright" | "accentLight" | "accentSurface" | "blueActive" | "blueDim" | "bluePrimary" | "blueBright" | "blueLight" | "blueSurface" | "greenActive" | "greenDim" | "greenPrimary" | "greenBright" | "greenLight" | "greenSurface" | "yellowActive" | "yellowDim" | "yellowPrimary" | "yellowBright" | "yellowLight" | "yellowSurface" | "redActive" | "redDim" | "redPrimary" | "redBright" | "redLight" | "redSurface" | "orangeActive" | "orangeDim" | "orangePrimary" | "orangeBright" | "orangeLight" | "orangeSurface" | "indigoActive" | "indigoDim" | "indigoPrimary" | "indigoBright" | "indigoLight" | "indigoSurface" | "pinkActive" | "pinkDim" | "pinkPrimary" | "pinkBright" | "pinkLight" | "pinkSurface" | "purpleActive" | "purpleDim" | "purplePrimary" | "purpleBright" | "purpleLight" | "purpleSurface" | "greyActive" | "greyDim" | "greyPrimary" | "greyBright" | "greyLight" | "greySurface" | "black" | "white" | "text" | "textPrimary" | "textSecondary" | "textAccent" | "textDisabled" | "background" | "backgroundPrimary" | "backgroundSecondary" | "border" | "blueGradient" | "greenGradient" | "redGradient" | "purpleGradient" | "greyGradient" | "transparent" | "currentColor" | text | - |
| id | string | - | The id attribute of element |
| level | "1" | "2" | 2 | - |
| ref | null | string | (instance: HTMLHeadingElement | HTMLLegendElement | null) => void | RefObject<HTMLHeadingElement | HTMLLegendElement> | - | Allows getting a ref to the component instance.
Once the component unmounts, React will set `ref.current` to `null`
(or call the ref with `null` if you passed a callback ref).
@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
| transform | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "capitalize" | "full-size-kana" | "full-width" | "lowercase" | "none" | "uppercase" | - | CSS property of text-transform |
By default, the semantic heading level matches the visual heading level, e.g. <Heading level="2"> will render an h2 element. If you need the semantics to be different from the visuals, you can provide the desired HTML tag via the as prop.
