Typography

The Typography component is used to display text with various styles and sizes.

Usage & Examples

Basic Usage

Heading 1

Heading 2

Heading 3

This is a basic body text example using the Typography component.

This is a smaller caption or supporting text.
basic-usage.tsx
"use client";
  
  import React from "react";
  import Typography from "@boreal-ui/next/Typography";
  
  export default function TypographyBasicExample() {
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          gap: "1rem",
        }}
      >
        <Typography as="div" textStyle="h1">
          Heading 1
        </Typography>
        <Typography textStyle="h2">Heading 2</Typography>
        <Typography textStyle="h3">Heading 3</Typography>
  
        <Typography textStyle="body">
          This is a basic body text example using the Typography component.
        </Typography>
  
        <Typography textStyle="caption">
          This is a smaller caption or supporting text.
        </Typography>
      </div>
    );
  }

Props API

26 props
Columns
Typography props API
Default
Description
alignTypographyAlignNoprops"inherit"Horizontal text alignment.
aria-atomicbooleanNoariaWhether assistive technologies should present the entire updated region when part of a live region changes.
aria-busybooleanNoariaIndicates whether the element is currently being updated, such as during loading.
aria-describedbystringNoariaReferences the id of another element that describes this element.
aria-hiddenbooleanNoariaWhether the element should be hidden from assistive technologies.
aria-labelstringNoariaDefines an accessible label for the element when a visible label is not sufficient.
aria-labelledbystringNoariaReferences the id of another element that labels this element.
aria-live"off" | "polite" | "assertive"NoariaIndicates that the element will be updated and describes how updates should be announced.
asElementTypeNopropsThe HTML element or custom component to render as. For example: `"p"`, `"span"`, `"h1"`, or a custom React component.
childrenReactNodeNopropsThe content to render inside the typography component.
classNamestringNostylingOptional custom CSS class name for the root element.
data-testidstringNotestingBackward-compatible alias for test ID attributes.