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
| Parameter | Type |
|---|---|
props | TextProps |
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
| Member | Type |
|---|---|
align | TextAlignment |
as | Heading | "p" | "span" | "label" |
breakWord | boolean |
color | Color |
customStyle | string |
id | string |
lineClamp | number |
ref | React.Ref<HTMLElement> |
selectable | boolean |
truncate | boolean |
variant | Variant |
weight | FontWeight |
Source
libs/design-system-core/src/components/Text/index.tsx:29
Variant
Variant:
Heading|BodyText|ButtonText