Heading
Heading titles a section or page in Mosaic. It renders as an <h2> by default, forwards a ref to the underlying element, and themes its font-size and color through the size and color variants. Reach for the render prop when you need a different heading level for the document outline.
Playground
Props
| Prop | Type | Default | Value |
|---|---|---|---|
| size | 'xs' | 'sm' | 'base' | 'lg' | 'xl' | '2xl' | 'base' | |
| color | 'primary' | 'neutral' | 'warning' | 'negative' | 'positive' | 'primary' | |
| render | (props) => ReactNode | — | — |
| className | string | — | — |
| style | CSSProperties | — | — |
Usage
import { Heading } from '@clerk/ui/mosaic/components/heading';
<Heading
size='base'
color='primary'
>
Page Title
</Heading>