Typography

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

Code

import { Typography } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <Typography variant="p">
      Order total updated after the last save.
    </Typography>
  );
}

Variants

Code

import { Typography } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-col tw:flex-wrap tw:gap-6">
      {(["h1", "h2", "h3", "h4", "h5", "h6", "p", "span"] as const).map(
        (variant) => (
          <Typography key={variant} variant={variant}>
            {`<Typography.${variant}/>`}
          </Typography>
        ),
      )}
    </div>
  );
}

Colors

Code

import { Typography } from "@falcon/ui-kit/dist/legacy";

export function Example() {
  return (
    <div className="tw:flex tw:flex-wrap tw:items-center tw:gap-6">
      {(
        [
          "text-dark",
          "text",
          "text-light",
          "alert",
          "link",
          "primary",
          "success",
        ] as const
      ).map((color) => (
        <Typography color={color} key={color}>
          {`${color} color`}
        </Typography>
      ))}
    </div>
  );
}

API

Typography

Props

children

children?: React.ReactNode

className

className?: string

color

color?: "success" | "link" | "text" | "primary" | "text-dark" | "alert" | "text-light"

fontSize

fontSize?: number

fontSizeBreakpoints

fontSizeBreakpoints?: Partial<Record<Breakpoint, number>>

fontWeight

fontWeight?: 400 | 500 | 700

lineHeight

lineHeight?: "large" | "medium" | "base"

variant

variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" = "p"