Toaster

Notifications

Short confirmations that come and go — saved, copied, sent. Nothing only in a toast should be needed later; errors people must act on belong in the page or an Alert.

Basic

<script setup lang="ts">
import { BlessButton, useToast } from "blessing-ui";
// <BlessToaster /> is mounted once at the app root (this site does it in the theme layout)
const { toast, success, error, warning, info } = useToast();
const reload = () => location.reload();
</script>

<template>
  <div class="row">
    <BlessButton size="sm" @click="toast('Link copied')">Copy link</BlessButton>
    <BlessButton size="sm" @click="success({ title: 'Saved', description: '2 fields updated' })"
      >Save</BlessButton
    >
    <BlessButton
      size="sm"
      @click="error({ title: 'Failed', description: 'Network error', duration: 0 })"
      >Sync (fails, stays)</BlessButton
    >
    <BlessButton size="sm" @click="warning('Low disk space')">Check storage</BlessButton>
    <BlessButton
      size="sm"
      @click="info({ title: 'Update', action: { label: 'Reload', onClick: reload } })"
      >New version</BlessButton
    >
  </div>
</template>

Undo over confirm: if an action can be reversed, do it and offer the way back.

Undo

• plot.md
• route-a.md
• route-b.md

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, useToast } from "blessing-ui";
const { toast } = useToast();
const files = ref(["plot.md", "route-a.md", "route-b.md"]);
function remove(i: number) {
  const [name] = files.value.splice(i, 1);
  // do it now, offer the way back — no "are you sure?"
  toast({
    title: `Deleted ${name}`,
    action: { label: "Undo", onClick: () => files.value.splice(i, 0, name) },
  });
}
</script>

<template>
  <ul class="files">
    <li v-for="(f, i) in files" :key="f">
      {{ f }}
      <BlessButton size="sm" variant="outline" :aria-label="`Delete ${f}`" @click="remove(i)"
        >Delete</BlessButton
      >
    </li>
    <li v-if="!files.length">No files.</li>
  </ul>
</template>

<style scoped>
.files {
  display: grid;
  gap: var(--bless-space-2);
  max-width: 320px;
  padding: 0;
  list-style: none;
}
.files li {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
</style>

• Mount one BlessToaster; call useToast() anywhere. Toasts are announced politely; danger ones interrupt.
• Timers pause while the pointer or keyboard focus is in the toaster, so an action button doesn't vanish mid-reach; duration: 0 keeps one until dismissed.
• action adds one button; position picks the corner; label names the region.

Usage

import { BlessToaster } from "blessing-ui";

API

Props

Name	Type	Default	Description
position	"top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center"	"bottom-right"
closeLabel	string	"Dismiss"
label	string	"Notifications"	the region's name