Typography

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

Usage

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.

"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 variant="h1">Heading 1</Typography>
      <Typography variant="h2">Heading 2</Typography>
      <Typography variant="h3">Heading 3</Typography>

      <Typography variant="body">
        This is a basic body text example using the Typography component.
      </Typography>

      <Typography variant="caption">
        This is a smaller caption or supporting text.
      </Typography>
    </div>
  );
}

Props

Data table
	Type	Description
align	TypographyAlign	Horizontal text alignment.
aria-atomic	boolean	Whether assistive technologies should present the entire updated region when part of a live region changes.
aria-busy	boolean	Indicates whether the element is currently being updated, such as during loading.
aria-describedby	string	References the id of another element that describes this element.
aria-hidden	boolean	Whether the element should be hidden from assistive technologies.
aria-label	string	Defines an accessible label for the element when a visible label is not sufficient.
aria-labelledby	string	References the id of another element that labels this element.
aria-live	"off" \| "polite" \| "assertive"	Indicates that the element will be updated and describes how updates should be announced.
as	ElementType	The HTML element or custom component to render as. For example: `"p"`, `"span"`, `"h1"`, or a custom React component.
children	ReactNode	The content to render inside the typography component.
className	string	Optional custom CSS class name for the root element.
id	string	Optional unique id for the root element.
italic	boolean	Whether the text should be displayed in italic style.
noWrap	boolean	Whether the text should remain on a single line without wrapping.
role	AriaRole	Optional ARIA role for the rendered element.
srOnly	boolean	Whether the text should be visually hidden but still available to screen readers.
style	CSSProperties	Optional inline styles applied to the root element.
testId	string	Optional test id used for testing the component.
theme	TypographyTheme	Visual theme style applied to the typography.
title	string	Advisory text for the element, typically shown as a tooltip on hover.
truncate	boolean	Whether overflowing text should be truncated, typically with an ellipsis.
underline	boolean	Whether the text should be underlined.
variant	TypographyVariant	Predefined typography style variant. Examples may include headings, body text, captions, or labels.
weight	TypographyWeight	Font weight of the text.