Interface TypographyProps

interface TypographyProps {
    altText?: null | string;
    children?: ReactNode;
    className?: string;
    color?: "link" | "inherit" | "mid-emphasis" | "low-emphasis" | "brand" | "error" | "text-on-primary";
    limitLines?: number;
    size?: "inherit" | "XS" | "S" | "M" | "L" | "XL" | "3XL" | "4XL" | "5XL" | "2XS" | "2XL" | "6XL";
    type?: "span" | "div" | "heading" | "paragraph";
    weight?: "bold" | "inherit" | "regular";
}

Properties

altText? children? className? color? limitLines? size? type? weight?

Properties

Optional altText

altText?: null | string

Alternative text to display on hover (HTML standard)

Optional children

children?: ReactNode

Children to render as typography

Optional className

className?: string

Custom class to give the html component

Optional color

color?: "link" | "inherit" | "mid-emphasis" | "low-emphasis" | "brand" | "error" | "text-on-primary"

Color of the text

Optional limitLines

limitLines?: number

When provided, a limit will be placed on the number of lines to render, using the -webkit-line-clamp CSS property. Note that browsers that do not support this property will instead just hide the overflow. Lines that are hidden will be replaced with an ellipsis.

Optional size

size?: "inherit" | "XS" | "S" | "M" | "L" | "XL" | "3XL" | "4XL" | "5XL" | "2XS" | "2XL" | "6XL"

Size of the text. Will inform heading size when used with heading

Optional type

type?: "span" | "div" | "heading" | "paragraph"

Type of the tag used for the text. Usually heading or paragraph for bodies of text, span for inline texts

Optional weight

weight?: "bold" | "inherit" | "regular"

Weight of the text. Will default to bold for headings

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc