Usage

Import the component from its dedicated entry. Structural styles are loaded automatically.

<script setup lang="ts">
import { Text } from '@astryx-vue/core/Text'
</script>

<template>
  <Text type="body">
    Body content
  </Text>
  <Text type="supporting">
    Supporting details
  </Text>
</template>

Best practices

Guidance	Practice
Recommended	Use type for semantic hierarchy: large for emphasis, supporting for hints, label for form labels.
Recommended	Set as="p" or display="block" when you need block-level layout.
Recommended	Use maxLines to clamp long text to a fixed number of lines.
Don't	Use Text in place of Heading. Headings should use the Heading component for correct semantics.
Don't	Mix too many type and size combinations in the same short passage.

Examples

Text types

Large body text Body text Supporting text Label text code snippet

Text provides body, large, supporting, label, and code semantic types.

Truncation

Truncation keeps long content inside its container: with maxLines set to 1 the text is cut off at the end of the first line and finished with an ellipsis.

Truncation keeps long content inside its container: with maxLines set to 2 the text is limited to two lines, and anything beyond that is cut off and finished with an ellipsis, so the surrounding layout stays intact no matter how much copy the consumer passes in.

Use maxLines to limit visible lines and truncate with an ellipsis.