Text

A flexible text element for body content with configurable size, weight, and text overflow handling.

Anatomy

<script>
  import { Text } from "@saas-ui/svelte/typography/text";
</script>

<!-- Basic text -->
<Text>This is body text.</Text>

<!-- With size -->
<Text size="lg">Larger text</Text>

<!-- With truncation -->
<Text truncate>Very long text that will be truncated...</Text>

<!-- With line clamp -->
<Text lineClamp="2">
  Long text that spans multiple lines will be clamped to 2 lines...
</Text>

Examples

Basic Accessibility

Basic text with default styling for body content and paragraphs.

<Text>Sphinx of black quartz, judge my vow.</Text>

Line Clamp Accessibility

Use the lineClamp prop to limit text to a specific number of lines with an ellipsis.

<div class="flex max-w-[300px]">
	<Text lineClamp="2">
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
		eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
		ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
		aliquip ex ea commodo consequat.
	</Text>
</div>

Sizes Accessibility

Use the size prop to change the size of the text. Available sizes: xs, sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl.

<DataList.Root orientation="vertical">
	{#each textSizes as size}
		<DataList.Item>
			<DataList.ItemLabel>{size}</DataList.ItemLabel>
			<DataList.ItemValue>
				<Text {size}>Chakra</Text>
			</DataList.ItemValue>
		</DataList.Item>
	{/each}
</DataList.Root>

Truncation Accessibility

Use the truncate prop to truncate text after a single line with an ellipsis.

<div class="flex max-w-[300px]">
	<Text truncate>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit.
	</Text>
</div>

Weights Accessibility

Use the weight prop to change the font weight. Available weights: light, normal, medium, semibold, bold.

<DataList.Root orientation="vertical">
	{#each textWeights as w}
		<DataList.Item>
			<DataList.ItemLabel>{w}</DataList.ItemLabel>
			<DataList.ItemValue>
				<Text weight={w}>Sphinx of black quartz, judge my vow.</Text>
			</DataList.ItemValue>
		</DataList.Item>
	{/each}
</DataList.Root>

Props

Prop	Type	Default	Description
`as`	`text`	`p`	-
`size`	`xs \| sm \| md \| lg \| xl \| 2xl \| 3xl \| 4xl \| 5xl \| 6xl \| 7xl`	`md`	The size of the component.
`weight`	`light \| normal \| medium \| semibold \| bold`	`normal`	-
`truncate`	`boolean`	-	-
`lineClamp`	`1 \| 2 \| 3 \| 4 \| 5 \| 6 \| none`	-	-
`fontWeight`	`any`	-	-
`textStyle`	`any`	-	-
`children`	`any`	-	The content to be rendered inside the component.
`class`	`text`	-	Additional CSS classes to apply.