BeeAlert

A status message displayed in the flow of the page: success, error, warning or information. For temporary notifications that stack in a corner of the screen, see BeeAlertList.

import { BeeAlert } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Types

The type prop sets the color and the icon. The default value is info.

Your draft has been saved.

Sending failed. Please try again in a moment.

Your session expires in 5 minutes.

A new version is available.

<script setup lang="ts">
import { BeeAlert } from "@thaisrr/beedesign";
</script>

<template>
  <div class="stack">
    <BeeAlert type="success">Your draft has been saved.</BeeAlert>
    <BeeAlert type="error">Sending failed. Please try again in a moment.</BeeAlert>
    <BeeAlert type="warning">Your session expires in 5 minutes.</BeeAlert>
    <BeeAlert type="info">A new version is available.</BeeAlert>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
</style>

Closing

With closable, a close button appears and emits close. It is up to you to remove the alert, for example with a v-if.

This alert closes with the X button.

<script setup lang="ts">
import { ref } from "vue";
import { BeeAlert, BeeButton } from "@thaisrr/beedesign";

const visible = ref(true);
</script>

<template>
  <BeeAlert v-if="visible" type="info" closable @close="visible = false">
    This alert closes with the X button.
  </BeeAlert>
  <BeeButton v-else variant="secondary" @click="visible = true">Show again</BeeButton>
</template>

Automatic closing

The duration prop closes the alert after a delay in milliseconds, by emitting close. The delay is paused while the alert is hovered or has focus, to leave time to read it. Without duration, the alert stays.

<BeeAlert type="success" :duration="4000" @close="visible = false">
  Saved.
</BeeAlert>

API

Props

Name	Type	Default	Description
type	"success" | "error" | "warning" | "info"	"info"	Nature of the message: color and icon.
closable	boolean	false	Shows a close button.
duration	number	0	Automatic closing after this delay in ms. 0: never.
closeLabel	string	"Close"	Accessible text of the close button.

To localize the close button, pass the text of your language, for example close-label="Fermer".

Events

Name	Payload	Description
close	none	Emitted on click on the close button, or at the end of duration.

Slots

Name	Description
default	Content of the alert.

CSS variables used

--bd-color-success, --bd-color-error, --bd-color-warning, --bd-color-info, --bd-color-surface, --bd-color-border, --bd-color-text, --bd-color-focus, --bd-font-main, --bd-font-size-md, --bd-radius-md, --bd-radius-full, --bd-space-sm, --bd-transition-fast, --bd-space-md, bd-border-width, --bd-alert-strip-width, --bd-focus-ring-width, --bd-focus-ring-offset.

Accessibility

• Errors and warnings have role="alert" and are announced right away. Successes and information messages have role="status" and are announced politely.
• Color is never the only indicator: each type also has an icon.
• Automatic closing is paused on hover and on focus.