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

Theme Variations

Customizable Close Button

  
  
  

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

With Icon

Centered Text

With Description

Complete Example with All Features

  

const handleClose = (event) => {
  console.log('Alert dismissed')
}

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | title | Alert title (required) | string | — | | type | Alert type | 'primary' \| 'success' \| 'warning' \| 'info' \| 'error' | 'info' | | description | Descriptive text | string | — | | closable | Whether alert can be dismissed | boolean | true | | center | Whether content is centered | boolean | false | | close-text | Custom close button text | string | — | | show-icon | Whether to display type icon | boolean | false | | effect | Theme style | 'light' \| 'dark' | 'light' |

Events

| Name | Description | Type | |------|-------------|------| | close | Triggered when alert is closed | (event: MouseEvent) => void |

Slots

| Name | Description | |------|-------------| | default | Content of the alert description | | title | Content of the alert title | | icon | Content of the alert icon |

Common Patterns

Dynamic Alert Type

  

import { ref, reactive } from 'vue'

const alertConfig = reactive({
  title: 'Operation Status',
  type: 'info',
  description: ''
})

const showSuccess = () => {
  alertConfig.type = 'success'
  alertConfig.title = 'Success!'
  alertConfig.description = 'Operation completed successfully.'
}

const showError = () => {
  alertConfig.type = 'error'
  alertConfig.title = 'Error!'
  alertConfig.description = 'An error occurred during the operation.'
}

Auto-dismiss Alert

  

import { ref, watch } from 'vue'

const visible = ref(true)

watch(visible, (newVal) => {
  if (newVal) {
    setTimeout(() => {
      visible.value = false
    }, 3000)
  }
})

Component Interactions

• Use with Form components to show validation results
• Combine with Message for temporary notifications vs persistent alerts
• Use with Notification for corner-based alerts that auto-dismiss
• Integrate with Dialog for modal alert scenarios

Best Practices

1. Use appropriate types: success for positive outcomes, error for failures, warning for cautions, info for neutral information
2. Keep titles concise and descriptions informative
3. Use show-icon for better visual recognition
4. Consider effect="dark" for dark-themed interfaces
5. Use closable="false" for critical alerts that must be acknowledged

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.