element-plus/website/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`.

```html
<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`.

```html
<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.

```html
<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>
  import { defineComponent } from 'vue'
  export default defineComponent({
    setup() {
      const hello = () => {
        alert('Hello World!')
      }
      return {
        hello,
      }
    },
  })
</script>
```

:::

### With icon

Displaying an icon improves readability.

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

```html
<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

```html
<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.

```html
<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.

```html
<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   |

### Slots

| Name  | Description                |
| ----- | -------------------------- |
| —     | description                |
| title | content of the Alert title |

### Events

| Event Name | Description                | Parameters |
| ---------- | -------------------------- | ---------- |
| close      | fires when alert is closed | —          |