Accepted values for text formatting.

Essentially, all the well-known HTML properties are available, but with predefined values.

If possible, use BBCode formatting as well.

See below for an example using some of the properties:

Example:

<Text fontWeight="bold" textAlign="center" wide >My awesome text</Text>

Hierarchy

Properties

customFontSize?: string

Font size custom definition

Example:

<Text customFontSize="24px" />
fontFamily?: string

Font-family (require font configuration)

Example:

<fontFamily="default" />
fontSize?: string

Font size definition by Design System

Example:

<Text fontSize="extra-small" />
fontStyle?: "normal" | "italic" | "oblique"

Changes font style

Example:

<fontStyle="normal" />
fontWeight?: "string" | "medium" | "light" | "regular" | "bold"

Changes the font weight

Example:

<fontWeight="light" />
letterSpacing?: "none" | "medium" | "small" | "large" | "quark" | "nano" | "extra-small" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

Changes the letter spacing of text tag

Example:

<letterSpacing="quark" />
lineClamp?: number

Controls how many lines for text-clamp

lineHeight?: "medium" | "small" | "large"

Changes the line height of the text

Example:

<lineHeight="small" />
overflowWrap?: "normal" | "break-word"

Controls how word-breaks are handled.

Example:

<overflowWrap="normal" />
textAlign?: "center" | "left" | "right" | "justify"

Sets the type of alignment of text. (Works only with block property)

Example:

<textAlign="center" />
textDecoration?: "none" | "underline" | "overline" | "line-through" | "blink"

Changes text decoration

Example:

<textDecoration="none" />
textIndent?: "none" | "medium" | "small" | "large" | "quark" | "nano" | "extra-small" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

Changes indentation of first line.

Example:

<textIdent="quark" />
textJustify?: "auto" | "inter-cluster" | "inter-word" | "distribute" | "distribute-all-lines"

Changes justify model of alignment

Example:

<textJustify="auto />
textOverflow?: "clip" | "ellipsis"

Changes text overflow

Example:

<textOverflow="clip" />
textRendering?: "auto" | "optimizeSpeed" | "optimizeLegibility" | "geometricPrecision"

Changes the text render method

Example:

<textRendering="auto"/>
textTransform?: "none" | "capitalize" | "uppercase" | "lowercase"

Changes text transformation

Example:

<textTransform="none" />
whiteSpace?: "normal" | "nowrap" | "pre" | "pre-wrap" | "pre-line" | "break-spaces"

Controls how white spaces (spaces, tabs, and line breaks) are handled.

Example:

<whiteSpaceValues="normal" />
wordSpacing?: "none" | "medium" | "small" | "large" | "quark" | "nano" | "extra-small" | "extra-large" | "big" | "display" | "huge" | "giant" | "jumbo" | "immense"

Changes the spacing size between words

Example:

<wordSpacing="quark" />