Skip to content

Typography Component

Description

The Typography component is used for consistent text styling across the application.

Props

Prop Type Default Description
variant "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body1" | "body2" | "caption" | "overline" "body1" Defines the text style.
color "primary" | "secondary" | "textPrimary" | "textSecondary" | "inherit" "textPrimary" Sets the text color.
align "left" | "center" | "right" | "justify" "left" Controls text alignment.
gutterBottom boolean false Adds margin-bottom spacing.
noWrap boolean false Prevents text wrapping.
paragraph boolean false Determines if the text is treated as a paragraph.
fontWeight "normal" | "bold" | "light" | number "normal" Sets the font weight.
fontStyle "normal" | "italic" | "oblique" "normal" Sets the font style.
href string undefined Converts text into a hyperlink.
target "_blank" | "_self" | "_parent" | "_top" undefined Defines how links open.
rel string undefined Specifies link relationship attributes.

Example Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Typography } from "@nomana-it/liberty-core"

export const TypographyExample = () => {
  return (
    <div>
      <Typography variant="h1" color="primary">Heading 1</Typography>
      <Typography variant="h2" color="secondary">Heading 2</Typography>
      <Typography variant="body1" gutterBottom>
        This is a body text with bottom margin.
      </Typography>
      <Typography variant="overline" fontWeight="bold">
        Overline text in bold.
      </Typography>
      <Typography variant="body2" fontStyle="italic">
        Italic body text.
      </Typography>
      <Typography variant="h6" href="https://example.com" target="_blank">
        Clickable heading
      </Typography>
    </div>
  );
};

🔗 GitHub Repository (Core): Liberty Core
🔗 GitHub Repository (Test Project): Liberty Test
📖 Live Documentation: Liberty Core Docs
💖 Sponsor & Support: Sponsor Liberty Core