Skip to main content

Text

Components

Text()

Text(props, context?): ReactNode

The Text component offers a versatile and highly-customizable way to render text content in your app. It supports various text variants, colors, alignments, truncation, word breaking, line clamping, font weights, and HTML tags. For customization, please use standard Taiwind CSS classes.

Parameters

ParameterType
propsTextProps
context?any

Returns

ReactNode

Example

 <Text variant="h6">H6 Text</Text>
<Text variant="h1">H1 Text</Text>
<Text variant="body1">Body1 Text</Text>
<Text variant="button-md" align="center" weight="bold">Bold Text aligned in the center</Text>
<Text variant="h6" as="label">
Text with variant H6 used as a label
</Text>

Source

libs/design-system-core/src/components/Text/index.tsx:90

Props

BodyText

BodyText: "subtitle1" | "subtitle2" | "body1" | "body2" | "label" | "footnotes1" | "footnotes2"

Source

libs/design-system-core/src/components/Text/index.tsx:12


ButtonText

ButtonText: "button-lg" | "button-md" | "button-sm"

Source

libs/design-system-core/src/components/Text/index.tsx:21


FontWeight

FontWeight: "normal" | "semibold" | "bold" | "light" | "medium"

Source

libs/design-system-core/src/components/Text/index.tsx:27


Heading

Heading: "h1" | "h2" | "h3" | "h4" | "h5" | "h6"

Source

libs/design-system-core/src/components/Text/index.tsx:10


TextAlignment

TextAlignment: "start" | "center" | "end" | "justify"

Source

libs/design-system-core/src/components/Text/index.tsx:25


TextProps

TextProps: PropsWithChildren<object>

Type declaration

MemberType
alignTextAlignment
asHeading | "p" | "span" | "label"
breakWordboolean
colorColor
customStylestring
idstring
lineClampnumber
refReact.Ref<HTMLElement>
selectableboolean
truncateboolean
variantVariant
weightFontWeight

Source

libs/design-system-core/src/components/Text/index.tsx:29


Variant

Variant: Heading | BodyText | ButtonText

Source

libs/design-system-core/src/components/Text/index.tsx:23