Alert

Display important messages with optional status styles for feedback and notices.

Basic Usage

Tip

Tip

Tip

Tip

<template>
  <div style="margin-bottom: 10px" v-for="v in status">
    <bp-alert :status="v" title="Tip"> </bp-alert>
  </div>
</template>

<script setup lang="ts">
const status = ["info", "success", "warning", "danger"];
</script>

Detailed Content

Use the content prop for additional text.

Info

Detailed description for an info alert.

Success

Operation completed. Continue to the next step.

Warning

Please note this may affect system settings.

Error

Operation failed. Check your network and try again.

<template>
  <div class="alert-list">
    <bp-alert status="info" title="Info" content="Detailed description for an info alert." />
    <bp-alert status="success" title="Success" content="Operation completed. Continue to the next step." />
    <bp-alert status="warning" title="Warning" content="Please note this may affect system settings." />
    <bp-alert status="danger" title="Error" content="Operation failed. Check your network and try again." />
  </div>
</template>

<style lang="scss" scoped>
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

Closable

Enable show-close and listen for the close event.

Closable alert

Success

Data saved.

<template>
  <div class="alert-list">
    <bp-alert status="info" title="Closable alert" show-close />
    <bp-alert status="success" title="Success" content="Data saved." show-close @close="onClose" />
  </div>
</template>

<script setup lang="ts">
const onClose = () => {
  console.log("alert closed");
};
</script>

<style lang="scss" scoped>
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

Icon

Control icons with hide-icon and icon.

Default icon

Hide icon

Custom icon

<template>
  <div class="alert-list">
    <bp-alert status="info" title="Default icon" />
    <bp-alert status="info" title="Hide icon" hide-icon />
    <bp-alert status="info" title="Custom icon" :icon="IconHeart3Fill" />
  </div>
</template>

<script setup lang="ts">
import { IconHeart3Fill } from "birdpaper-icon";
</script>

<style lang="scss" scoped>
.alert-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
</style>

Alert Props

title	Alert title	String	-	-
content	Detailed description	String	-	-
status	Alert status type	String	info	-
icon	Custom icon component	Component	-	-
hide-border	Whether to hide the border	Boolean	-	-
hide-icon	Whether to hide icon	Boolean	-	-
show-close	Whether to show close Button	Boolean	-	-

Alert Events

close

Triggered when the alert is closed

-

-

Alert Slots

content	Custom description area	-	-
close	Custom close button content	-	-