Text

Matches Arco Typography.Text with primary text by default and status colors through type. See the Element Plus docs for props.

Types

Use type for primary and status colors; default text matches Arco's primary text.

DefaultPrimarySuccessWarningDangerInfo

<template>
  <el-text>Default</el-text>
  <el-text type="primary">Primary</el-text>
  <el-text type="success">Success</el-text>
  <el-text type="warning">Warning</el-text>
  <el-text type="danger">Danger</el-text>
  <el-text type="info">Info</el-text>
</template>

Sizes

The size prop keeps Element Plus's three font sizes.

SmallDefaultLarge

<template>
  <el-text size="small">Small</el-text>
  <el-text>Default</el-text>
  <el-text size="large">Large</el-text>
</template>

Truncation

Set a width and truncated to shorten overflowing text with an ellipsis.

A long line of text that does not fit the available space.

<template>
  <el-text truncated style="width: 200px">A long line of text that does not fit the available space.</el-text>
</template>

Differences from Arco

• Arco has no info type; it remains neutral. The size prop keeps the three Element Plus sizes.