Alert

Maps to Arco Alert by color: primary matches info, and info matches normal. See the Element Plus docs for props.

Alert Types

Primary, success, warning and error match Arco statuses; info uses neutral gray.

primary

success

warning

error

info

<script setup lang="ts">
const types = ['primary', 'success', 'warning', 'error', 'info'] as const
</script>

<template>
  <div style="width: 100%; display: grid; gap: 12px">
    <el-alert v-for="type in types" :key="type" :type="type" :title="type" :show-icon="type !== 'info'" :closable="false" />
  </div>
</template>

Description & Closing

Description adds supporting text; the close button keeps normal interaction.

Release available

A new version is ready to install.

Saved

Your changes have been saved.

<template>
  <div style="width: 100%; display: grid; gap: 12px">
    <el-alert type="primary" title="Release available" description="A new version is ready to install." show-icon />
    <el-alert type="success" title="Saved" description="Your changes have been saved." show-icon :closable="false" />
  </div>
</template>

Dark Effect

Arco has no dark effect; it retains the Element Plus solid form.

Operation completed

<template>
  <el-alert type="success" title="Operation completed" effect="dark" show-icon :closable="false" style="width: 100%" />
</template>

Differences from Arco

• Status icons use Element Plus icons; the dark effect has no Arco equivalent.