BeeAlertList and useAlert

Temporary notifications that stack in a corner of the screen. You mount one BeeAlertList once in the application, then trigger alerts from anywhere with useAlert().

import { BeeAlertList, useAlert } from "@thaisrr/beedesign";
import "@thaisrr/beedesign/style.css";

Setup

Mount BeeAlertList once, at the root of the application.

<!-- App.vue -->
<template>
  <RouterView />
  <BeeAlertList position="top-right" />
</template>

Then call useAlert() in any component or logic file. There is nothing to provide or inject.

const { success, error } = useAlert();

async function save() {
  try {
    await api.save(draft);
    success("Draft saved");
  } catch {
    error("Saving failed");
  }
}

Try it

Each button triggers an alert. The position buttons move the stack.

<script setup lang="ts">
import { onBeforeUnmount, ref } from "vue";
import { BeeAlertList, BeeButton, BeeFlex, useAlert } from "@thaisrr/beedesign";
import type { AlertPosition } from "@thaisrr/beedesign";

const { success, error, info, warning, clear } = useAlert();

const position = ref<AlertPosition>("bottom-center");

const positions: { value: AlertPosition; label: string }[] = [
  { value: "top-left", label: "Top left" },
  { value: "top-center", label: "Top center" },
  { value: "top-right", label: "Top right" },
  { value: "bottom-left", label: "Bottom left" },
  { value: "bottom-center", label: "Bottom center" },
  { value: "bottom-right", label: "Bottom right" },
];

onBeforeUnmount(clear);
</script>

<template>
  <div class="stack">
    <BeeFlex justify="flex-start" :gap="8" :responsive="false">
      <BeeButton @click="success('Draft saved')">Success</BeeButton>
      <BeeButton @click="error('Sending failed. Please try again in a moment.')">Error</BeeButton>
      <BeeButton @click="warning('Your session expires in 5 minutes.')">Warning</BeeButton>
      <BeeButton @click="info('A new version is available.')">Info</BeeButton>
      <BeeButton variant="ghost" @click="clear()">Close all</BeeButton>
    </BeeFlex>

    <BeeFlex justify="flex-start" :gap="8" :responsive="false">
      <BeeButton
          v-for="item in positions"
          :key="item.value"
          :variant="position === item.value ? 'primary' : 'secondary'"
          @click="position = item.value"
      >
        {{ item.label }}
      </BeeButton>
    </BeeFlex>
  </div>

  <BeeAlertList :position="position" />
</template>

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

Position

The position prop of BeeAlertList sets where the alerts stack: top-left, top-center, top-right, bottom-left, bottom-center (default) or bottom-right. Alerts arrive in order: the oldest at the top of the stack, the most recent below it.

Duration

Each alert closes by itself after 5 seconds. Pass duration in milliseconds to change this delay, or 0 for an alert that stays until it is closed. The delay is paused while the alert is hovered or has focus.

success("Saved", { duration: 2000 });
error("Connection lost", { duration: 0 });

With Nuxt

Only call the useAlert() methods on the client side (in an event handler, for example). The state is shared by the whole application, so an alert created during server rendering could be seen by several visitors.

API

useAlert()

Returns these methods:

Method	Returns	Description
success(message, options?)	number	Shows a success alert.
error(message, options?)	number	Shows an error alert.
warning(message, options?)	number	Shows a warning.
info(message, options?)	number	Shows an information message.
dismiss(id)	void	Closes the alert whose id was returned at creation.
clear()	void	Closes all alerts.

Options:

Name	Type	Default	Description
duration	number	5000	Duration in milliseconds. 0: the alert stays until closed.

The message is plain text. For rich content (a link, formatting), use BeeAlert directly.

BeeAlertList: props

Name	Type	Default	Description
position	AlertPosition	"bottom-center"	Corner or edge where the alerts stack.

AlertPosition is "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right".

CSS variables used

Those of BeeAlert, plus --bd-z-alert, --bd-shadow-2, --bd-space-md and --bd-transition-base.

Accessibility

Alerts use the roles of BeeAlert: alert for errors and warnings, status for the rest. The area that holds the stack does not capture clicks, so the page stays usable underneath. Animations are disabled when prefers-reduced-motion is enabled.