Content
Typography

Typography

The Typography component allows you to customize text styling with various properties. It can be used to display text with different fonts, sizes, colors, and alignments.

Examples

Basic Usage

<Widget src="flashui.near/widget/Typography" props={{ text: "H1 flashui heading", variant:"h1", color: "white" }} />
<Widget src="flashui.near/widget/Typography" props={{ text: "H2 flashui heading", variant:"h2", color: "white" }} />
<Widget src="flashui.near/widget/Typography" props={{ text: "H3 flashui heading", variant:"h3", color: "white" }} />
<Widget src="flashui.near/widget/Typography" props={{ text: "H4 flashui heading", variant:"h4", color: "white" }} />
<Widget src="flashui.near/widget/Typography" props={{ text: "H5 flashui heading", variant:"h5", color: "white" }} />
<Widget src="flashui.near/widget/Typography" props={{ text: "H6 flashui heading", variant:"h6", color: "white" }} />

Props

The Typography component accepts the following props:

  • text (string, optional): The text content to be displayed. Defaults to "Paragraph."

  • color (string, optional): The text color. Defaults to "black."

  • background (string, optional): The background color of the text. Defaults to "transparency."

  • textAlign (string, optional): The text alignment. Defaults to "left."

  • reverse (boolean, optional): If true, reverses the text direction (right-to-left). Defaults to false.

  • verticalAlign (string, optional): The vertical alignment of the text. Defaults to "baseline."

  • textDecoration (string, optional): Text decoration (e.g., underline, overline). Defaults to "none."

  • textTransform (string, optional): Text transformation (e.g., uppercase, lowercase). Defaults to "none."

  • textIndent (string, optional): Text indentation. Defaults to "0."

  • letterSpacing (string, optional): Letter spacing. Defaults to "0."

  • lineHeight (string, optional): Line height. Defaults to "1."

  • wordSpacing (string, optional): Word spacing. Defaults to "0."

  • whiteSpace (string, optional): White space handling (e.g., "nowrap"). Defaults to "nowrap."

  • variant (string, optional): The text variant (e.g., "h1," "h2," "p"). Defaults to "p."

  • fontSize (string, optional): The font size. Automatically calculated based on variant if not provided.

  • component (string, optional): The HTML tag to use for rendering the text. Defaults to "p."

  • fontWeight (string, optional): The font weight (e.g., "bold," "regular"). Defaults to "regular."

  • textShadow (string, optional): Text shadow styling. Defaults to "none."

Behavior

  • The Typography component provides extensive customization options for text styling, including text size, color, alignment, and more.

  • The variant prop can be used to quickly set text size based on common heading levels (e.g., "h1," "h2").

  • The fontSize prop allows you to set a custom font size, or it is automatically calculated based on the variant if not provided.

TableLoading