ComponentsHeading

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

Combine the level prop with asChild to set the visual size while manually controlling the semantic 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 asChild level="5">
        <h1>This is an h1 heading in h5 size</h1>
      </Heading>
      <Heading asChild>
        <h5>This is an h5 heading in h1 size</h5>
      </Heading>
      <Heading asChild level="3">
        <h6>This is an h6 heading in h3 size</h6>
      </Heading>
    </Flex>
  );
}

Related

Text

Display body or any other form of text. By default it outputs the <p> paragraph element.

Props

Heading

Supports all Text props in addition to its own. Renders an <h1> element.

Prop

asChild

Change the default rendered element for the one passed as a child, merging their props and behavior.

Read the Composition guide for more details.

false | true

className

string

level

Switch between the different h1-h6 levels.

"1" | "2" | "3" | "4" | "6" | "5"

Default: 1

lineClamp

Truncate the text at specific number of lines.

"1" | "2" | "3" | "4"

truncate

Whether to truncate the text and add an ellipsis at the end.

false | true

Changelog

0.1.0

  • Added component