Message

Matches Arco Message; primary maps to info, with light panels and colored status icons. See the Element Plus docs for props.

Message Types

Click a button to call ElMessage and show a timed message.

<script setup lang="ts">
import { ElMessage } from 'element-plus'
const types = ['primary', 'success', 'warning', 'error', 'info'] as const
</script>

<template>
  <el-button v-for="type in types" :key="type" @click="ElMessage({ type, message: 'This is a ' + type + ' message', showClose: true })">{{ type }}</el-button>
</template>

Plain Messages

Plain is an Element Plus extension and remains distinct from the default bordered message.

<script setup lang="ts">
import { ElMessage } from 'element-plus'
</script>

<template>
  <el-button @click="ElMessage({ message: 'Default message', type: 'success' })">Default</el-button>
  <el-button @click="ElMessage({ message: 'Plain message', type: 'success', plain: true })">Plain</el-button>
</template>

Differences from Arco

• Icons differ; info retains the Element Plus neutral icon.
• Plain has no Arco equivalent and keeps its shadow without a visible border.