element/examples/docs/en-US/alert.md

Alert

Displays important alert messages.

Basic usage

Alert components are non-overlay elements in the page that does not disappear automatically.

:::demo Alert provides 4 types of themes defined by type, whose default value is info.

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

:::

Theme

Alert provide two different themes, light and dark.

:::demo Set effect to change theme, default is light.

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

:::

Customizable close button

Customize the close button as texts or other symbols.

:::demo Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. closable attribute decides if the component can be closed or not. It accepts boolean, and the default is true. You can set close-text attribute to replace the default cross symbol as the close button. Be careful that close-text must be a string. close event fires when the component is closed.

<template>
  <el-alert
    title="unclosable alert"
    type="success"
    :closable="false">
  </el-alert>
  <el-alert
    title="customized close-text"
    type="info"
    close-text="Gotcha">
  </el-alert>
  <el-alert
    title="alert with callback"
    type="warning"
    @close="hello">
  </el-alert>
</template>

<script>
  export default {
    methods: {
      hello() {
        alert('Hello World!');
      }
    }
  }
</script>

:::

With icon

Displaying an icon improves readability.

:::demo Setting the show-icon attribute displays an icon that corresponds with the current Alert type.

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

:::

Centered text

Use the center attribute to center the text.

:::demo

<template>
  <el-alert
    title="success alert"
    type="success"
    center
    show-icon>
  </el-alert>
  <el-alert
    title="info alert"
    type="info"
    center
    show-icon>
  </el-alert>
  <el-alert
    title="warning alert"
    type="warning"
    center
    show-icon>
  </el-alert>
  <el-alert
    title="error alert"
    type="error"
    center
    show-icon>
  </el-alert>
</template>

:::

With description

Description includes a message with more detailed information.

:::demo Besides the required title attribute, you can add a description attribute to help you describe the alert with more details. Description can only store text string, and it will word wrap automatically.

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

:::

With icon and description

:::demo At last, this is an example with both icon and description.

<template>
  <el-alert
    title="success alert"
    type="success"
    description="more text description"
    show-icon>
  </el-alert>
  <el-alert
    title="info alert"
    type="info"
    description="more text description"
    show-icon>
  </el-alert>
  <el-alert
    title="warning alert"
    type="warning"
    description="more text description"
    show-icon>
  </el-alert>
  <el-alert
    title="error alert"
    type="error"
    description="more text description"
    show-icon>
  </el-alert>
</template>

:::

Attributes

Attribute	Description	Type	Accepted Values	Default
title	title	string	—	—
type	Component type	string	success/warning/info/error	info
description	Descriptive text. Can also be passed with the default slot	string	—	—
closable	If closable or not	boolean	—	true
center	Whether to center the text	boolean	—	false
close-text	Customized close button text	string	—	—
show-icon	If a type icon is displayed	boolean	—	false
effect	Choose theme	string	light/dark	light

Slot

Name	Description
title	content of the Alert title

Events

Event Name	Description	Parameters
close	fires when alert is closed	—