Typography

Import from @falcon/ui-kit/dist/legacy, not @falcon/ui-kit.

Typography renders text using Falcon’s legacy type scale, color tokens, font weights, line heights, and responsive font-size utilities.

Primary

Code

<Typography variant="p">Order total updated after the last save.</Typography>

Variants

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <FlexWrapper align="center" gap={24} wrap="wrap">
    {["h1", "h2", "h3", "h4", "h5", "h6", "p", "span"].map((variant) => (
      <Typography key={variant} variant={variant}>
        {`<Typography.${variant}/>`}
      </Typography>
    ))}
  </FlexWrapper>
</div>

Colors

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <FlexWrapper align="center" gap={24} wrap="wrap">
    {[
      "text-dark",
      "text",
      "text-light",
      "alert",
      "link",
      "primary",
      "success",
    ].map((color) => (
      <Typography color={color} key={color}>
        {`${color} color`}
      </Typography>
    ))}
  </FlexWrapper>
</div>

Font Weight

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <FlexWrapper align="center" gap={24} wrap="wrap">
    {[400, 500, 700].map((weight) => (
      <Typography fontWeight={weight} key={weight}>
        {`Font weight ${weight}`}
      </Typography>
    ))}
  </FlexWrapper>
</div>

Line Height

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  <FlexWrapper align="center" gap={24} wrap="wrap">
    {["base", "medium", "large"].map((lineHeight) => (
      <div key={lineHeight} style={{ border: "1px solid gray" }}>
        <Typography fontSize={32} lineHeight={lineHeight}>
          {`Line height ${lineHeight}`}
        </Typography>
      </div>
    ))}
  </FlexWrapper>
</div>

Span Example Variant

Code

<div style={{ margin: "0 auto", width: "fit-content" }}>
  Order status changed to{" "}
  <Typography color="alert" variant="span">
    blocked
  </Typography>{" "}
  after the sync failed.
</div>

API

Typography

Name	Type/Description
className	string | undefined
color	"link" | "text" | "alert" | "success" | "primary" | "text-dark" | "text-light" | undefined
fontSize	number | undefined
fontSizeBreakpoints	Partial<Record<Breakpoint, number>> | undefined
fontWeight	400 | 500 | 700 | undefined
lineHeight	"base" | "large" | "medium" | undefined
variant = "p"	"h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | undefined