el-alert

Alert Component

Alert component displays important alert messages on the page. Unlike notifications, alerts are non-overlay elements that do not disappear automatically.

When to Use

• Display important system messages or warnings
• Show operation results (success, error, warning, info)
• Present non-dismissible status information
• Guide users with important instructions

Basic Usage

<template>
  <el-alert title="success alert" type="success" />
  <el-alert title="warning alert" type="warning" />
  <el-alert title="info alert" type="info" />
  <el-alert title="error alert" type="error" />
  <el-alert title="primary alert" type="primary" />
</template>

Theme Variations

<template>
  <el-alert title="Light theme" type="success" effect="light" />
  <el-alert title="Dark theme" type="success" effect="dark" />
</template>

Customizable Close Button

<template>
  <el-alert title="unclosable alert" type="success" :closable="false" />
  <el-alert title="custom close text" type="info" close-text="Got it!" />
  <el-alert title="with close callback" type="warning" @close="handleClose" />
</template>

<script setup>
const handleClose = (event) => {
  console.log('Alert closed', event)
}
</script>

With Icon

<template>
  <el-alert title="with default icon" type="success" show-icon />
  <el-alert title="custom icon slot" type="warning" show-icon>
    <template #icon>
      <el-icon><Star /></el-icon>
    </template>
  </el-alert>
</template>

Centered Text

<template>
  <el-alert title="centered alert" type="success" center />
</template>

With Description

<template>
  <el-alert
    title="with description"
    type="success"
    description="This is a description message with more details."
  />
</template>

Complete Example with All Features

<template>
  <el-alert
    title="Success Alert"
    type="success"
    description="Your operation was completed successfully."
    show-icon
    center
    closable
    close-text="Dismiss"
    @close="handleClose"
  />
</template>

<script setup>
const handleClose = (event) => {
  console.log('Alert dismissed')
}
</script>