Alert

Displays important alert messages.

Basic usage

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

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

Info alert

Success alert

Warning alert

Error alert

---

<template>
  <b-space vertical fill class="w-full">
    <b-alert title="Info alert" type="info" />
    <b-alert title="Success alert" type="success" />
    <b-alert title="Warning alert" type="warning" />
    <b-alert title="Error alert" type="error" />
  </b-space>
</template>

Theme

Alert provide two different themes, light and dark.

Set effect to change theme, default is light.

Success alert

Info alert

Warning alert

Error alert

---

<template>
  <b-space vertical fill class="w-full">
    <b-alert title="Success alert" type="success" effect="dark" />
    <b-alert title="Info alert" type="info" effect="dark" />
    <b-alert title="Warning alert" type="warning" effect="dark" />
    <b-alert title="Error alert" type="error" effect="dark" />
  </b-space>
</template>

Customizable Close Button

Customize the close button as texts or other symbols.

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.

Unclosable alert

Customized close-text

Gotcha

Alert with callback

---

<template>
  <b-space vertical fill class="w-full">
    <b-alert title="Unclosable alert" type="success" :closable="false" />
    <b-alert title="Customized close-text" type="info" close-text="Gotcha" />
    <b-alert title="Alert with callback" type="warning" @close="hello" />
  </b-space>
</template>

<script lang="ts" setup>
const hello = () => {
  // eslint-disable-next-line no-alert
  alert('Hello World!')
}
</script>

Without Icon

Displaying an icon improves readability.

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

Success alert

Info alert

Warning alert

Error alert

---

<template>
  <b-space vertical fill class="w-full">
    <b-alert title="Success alert" type="success" :show-icon="false" />
    <b-alert title="Info alert" type="info" :show-icon="false" />
    <b-alert title="Warning alert" type="warning" :show-icon="false" />
    <b-alert title="Error alert" type="error" :show-icon="false" />
  </b-space>
</template>

Centered Text

Use the center attribute to center the text.

Success alert

Info alert

Warning alert

Error alert

---

<template>
  <b-space vertical fill class="w-full">
    <b-alert title="Success alert" type="success" center />
    <b-alert title="Info alert" type="info" center />
    <b-alert title="Warning alert" type="warning" center />
    <b-alert title="Error alert" type="error" center />
  </b-space>
</template>

With Description

Description includes a message with more detailed information.

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.

With description

This is a description.

---

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

Alert Attributes

Name	Description	Type	Default
title	alert title	string	—
type	alert type	success / warning / info / error	info
description	descriptive text	string	—
closable	whether closable or not	boolean	true
center	whether to center the text	boolean	false
close-text	customized close button text	string	—
show-icon	whether a type icon is displayed	boolean	true
effect	theme style	light / dark	light

Alert Events

Name	Description	Type
close	trigger when alert is closed.	(evt: MouseEvent) => void

Alert Slots

Name	Description
default	content of the alert description.
title	content of the alert title.