Heading
Heading component is used to display page title and section headings. The default root element is h1 which can be configured using the level prop.
#
Documentation
#
#
Usage
#
Use the level prop to control both the semantic tag and visual size.
This is h1 heading
This is h2 heading
This is h3 heading
This is h4 heading
This is h5 heading
This is h6 heading
import { Flex, Heading } from "@optiaxiom/react";
export function App() {
return (
<Flex>
<Heading level="1">This is h1 heading</Heading>
<Heading level="2">This is h2 heading</Heading>
<Heading level="3">This is h3 heading</Heading>
<Heading level="4">This is h4 heading</Heading>
<Heading level="5">This is h5 heading</Heading>
<Heading level="6">This is h6 heading</Heading>
</Flex>
);
}#
Visual size
#
Use the appearance prop to only control the visual size independent of the level and tag.
This is an h1 heading in h5 size
This is an h5 heading in h1 size
This is an h6 heading in h3 size
import { Flex, Heading } from "@optiaxiom/react";
export function App() {
return (
<Flex>
<Heading appearance="h5">This is an h1 heading in h5 size</Heading>
<Heading appearance="h1" level="5">
This is an h5 heading in h1 size
</Heading>
<Heading appearance="h3" level="6">
This is an h6 heading in h3 size
</Heading>
</Flex>
);
}#
Props
#
#
Heading
#
Supports all Text props in addition to its own.
Name | Type |
|---|---|
appearance |
Control the visual size without changing the semantic tag. |
asChild |
|
level |
Presets for each level of heading h1-h6. |
#
Changelog
#
#
0.1.0
#
- Added component