Typography Component Usage

ℹ️

This component is used to display text with different styles. It uses the Typography component from UI.

Example Usage

ℹ️

This example shows how to use the component.

import { Typography } from "@/@core";
 
export default function MyComponent() {
  return (
    <>
      <Typography Level={"h1"}>My Heading</Typography>
      <Typography Level={"h2"}>My Heading</Typography>
      <Typography Level={"h3"}>My Heading</Typography>
      <Typography Level={"h4"}>My Heading</Typography>
      <Typography Level={"h5"}>My Heading</Typography>
      <Typography Level={"h6"}>My Heading</Typography>
      <Typography Level={"p"}>My Paragraph</Typography>
      <Typography Level={"span"}>My Span</Typography>
    </>
  );
}

Customizing the Component

ℹ️

This example shows how to customize the component.

import { Typography } from "@/@core";
 
export default function MyComponent() {
  return (
    <>
      <Typography Level={"h1"} size={"2xl"} className={"text-primary my-4"}>
        Any Level of Heading or p or span with custom size and class name
      </Typography>
    </>
  );
}

ℹ️

Note: The Level prop can be any of the following values: h1, h2, h3, h4, h5, h6, p, span. The default value is p.

ℹ️

Node: The children prop can be any of the following values: string, number, boolean, array, object, function, symbol, null, undefined, ReactElement, ReactNodeArray, ReactPortal.

Props

ℹ️

This table shows the props that can be passed into the component.

Name	Type	Default	Description
Level	string	`p`	The level of the text. `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`, `span` `required`
className	string	`null`	The class name to apply to the text.
children	node	`null`	The text to display. `required`
size	string	`base`	The size of the text. `9xl`, `8xl`, `7xl`, `6xl`, `5xl`, `4xl`, `3xl`, `2xl`, `xl`, `lg`, `base`, `sm`, `xs`

Variants Prop Values

ℹ️

This table shows the values that can be passed into the size prop.

Value	Description
`9xl`	The text will be displayed at 9xl size.
`8xl`	The text will be displayed at 8xl size.
`7xl`	The text will be displayed at 7xl size.
`6xl`	The text will be displayed at 6xl size.
`5xl`	The text will be displayed at 5xl size.
`4xl`	The text will be displayed at 4xl size.
`3xl`	The text will be displayed at 3xl size.
`2xl`	The text will be displayed at 2xl size.
`xl`	The text will be displayed at xl size.
`lg`	The text will be displayed at lg size.
`base`	The text will be displayed at base size.
`sm`	The text will be displayed at sm size.
`xs`	The text will be displayed at xs size.

Tooltip Checkbox