Note
This documentation describes the Text Vue component for native UI views for Xml templates see text.
Text
Renders an inline <span> with design-system typography tokens. Use for body copy, labels, captions, or any non-heading text.
Import
import { Text } from '@neos/design-system'
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size |
'extrasmall' \| 'small' \| 'medium' \| 'large' \| 'extralarge' \| number |
'medium' |
Font size. Pass a token string or a pixel number |
weight |
'regular' \| 'strong' \| 'stronger' |
'regular' |
Font weight |
orientation |
'horizontal' \| 'vertical' |
'horizontal' |
'vertical' sets writing-mode: vertical-rl |
tooltip |
string |
undefined |
Native title attribute shown on hover |
maxLines |
number |
undefined |
Clamp text to N lines with ellipsis overflow |
Slots
| Slot | Description |
|---|---|
default |
Text content |
Usage Examples
Basic text
<Text>Hello, world!</Text>
Bold caption
<Text weight="strong" size="small">Section Title</Text>
Truncated single line
<Text :max-lines="1" tooltip="Full description text here">
This is a very long description that will be truncated after one line.
</Text>
Vertical label (e.g. axis label)
<Text orientation="vertical" size="small">Quantity</Text>
Dynamic pixel size
<Text :size="16">Custom 16px text</Text>