Text
The Text component is used to create various text elements, providing consistent typography styles and flexible customization options. This component is suitable for scenarios that require unified text styling, such as paragraphs, prompt text, labels, etc.
Basic Usage
The basic Text component defaults to rendering as a <p> element:
This is a regular text
<Text>This is a regular text</Text>Different Sizes
The Text component provides multiple size options:
Extra small text (xs)
Small text (sm)
Medium text (md) - Default
Large text (lg)
Extra large text (xl)
<Text size="xs">Extra small text (xs)</Text>
<Text size="sm">Small text (sm)</Text>
<Text size="md">Medium text (md) - Default</Text>
<Text size="lg">Large text (lg)</Text>
<Text size="xl">Extra large text (xl)</Text>Text Colors
You can set different text colors using the color property:
Default color text
Primary color text
Secondary color text
Accent color text
Muted color text
<Text color="default">Default color text</Text>
<Text color="primary">Primary color text</Text>
<Text color="secondary">Secondary color text</Text>
<Text color="accent">Accent color text</Text>
<Text color="muted">Muted color text</Text>Font Weight
Adjust the weight of the text:
Light text
Normal text (Default)
Medium text
Semibold text
Bold text
<Text weight="light">Light text</Text>
<Text weight="normal">Normal text (Default)</Text>
<Text weight="medium">Medium text</Text>
<Text weight="semibold">Semibold text</Text>
<Text weight="bold">Bold text</Text>Text Alignment
Control the alignment of text:
Left-aligned text (Default)
Center-aligned text
Right-aligned text
Justified text. This is a longer text to demonstrate the effect of justified alignment. Justified alignment keeps the left and right edges of the text aligned by adjusting the spacing between words.
<Text align="left">Left-aligned text (Default)</Text>
<Text align="center">Center-aligned text</Text>
<Text align="right">Right-aligned text</Text>
<Text align="justify">Justified text. This is a longer text to demonstrate the effect of justified alignment. Justified alignment keeps the left and right edges of the text aligned by adjusting the spacing between words.</Text>Text Styles
You can set italic and underline styles:
Italic text
Underlined text
Italic and underlined text
<Text italic>Italic text</Text>
<Text underline>Underlined text</Text>
<Text italic underline>Italic and underlined text</Text>Text Truncation
For long text that might overflow its container, you can use the truncate property to truncate it:
This is a very long text content that will exceed the container width, so it will be truncated and display an ellipsis…
<div style="width: 200px; border: 1px dashed #ccc; padding: 8px;">
<Text truncate>This is a very long text content that will exceed the container width, so it will be truncated and display an ellipsis...</Text>
</div>Custom Elements
Use the as property to change the rendered HTML element:
<Text as="span">This is a span element</Text>
<Text as="div">This is a div element</Text>
<Text as="label">This is a label element</Text>Combined Usage
You can combine multiple properties to create customized text styles:
This is an important notification message
<Text
size="lg"
color="primary"
weight="bold"
align="center"
class="cosy:py-2 cosy:border cosy:border-primary-200 cosy:rounded-md"
>
This is an important notification message
</Text>