Alert

Inline notice

A message that lives in the page, next to what it's about — a form that failed, a box that's on sale, a caveat above a table. It stays until dismissed or the state changes. For a message that reacts to an action and goes away by itself, use Toaster; for one that must be answered before anything else, AlertDialog.

live sets the ARIA role. status (default) is polite: read when the screen reader gets to it, right for anything already on the page. alert is assertive: announced the moment it appears, interrupting — use it only for an alert you insert after something happens, like the payment failure below, never for one in the initial markup. none for purely decorative notices.

color sets the edge: text (default) for a plain notice, danger, warning, success and info for status. accent is only for a notice about something already chosen — colour means chosen, so a sale or an announcement stays ink.

dismissible adds a close button. Bind v-model to bring the alert back later; without it, a dismissed alert stays gone until it is re-created. Either way dismiss fires. The alert takes keyboard focus with it when it goes, so handle @dismiss and move focus to what comes next — the demo hands it to "show again".

Basic

★

Blu-ray BOX

2019.09.25 発売。

Heads up

Tickets sell out fast.

Saved.

New episode

Episode 0 streams from Friday.

<script setup lang="ts">
import { nextTick, ref } from "vue";
import { BlessAlert, BlessButton } from "blessing-ui";
const open = ref(true);
const failed = ref(false);
const again = ref<InstanceType<typeof BlessButton>>();
// the alert is gone, and focus with it: hand it to what comes next
async function dismissed() {
  await nextTick();
  again.value?.$el.focus();
}
</script>

<template>
  <div class="col" style="max-width: 560px">
    <BlessAlert v-model="open" title="Blu-ray BOX" dismissible @dismiss="dismissed">
      2019.09.25 発売。<template #icon>★</template>
    </BlessAlert>
    <BlessAlert title="Heads up" color="warning">Tickets sell out fast.</BlessAlert>
    <BlessAlert v-if="failed" color="danger" live="alert">Payment failed. Try again.</BlessAlert>
    <BlessAlert color="success">Saved.</BlessAlert>
    <BlessAlert color="info" title="New episode" dismissible>
      Episode 0 streams from Friday.
    </BlessAlert>
    <div class="row">
      <BlessButton v-if="!open" ref="again" size="sm" @click="open = true">show again</BlessButton>
      <BlessButton size="sm" variant="outline" color="danger" @click="failed = !failed">{{
        failed ? "clear" : "fail a payment"
      }}</BlessButton>
    </div>
  </div>
</template>

Usage

import { BlessAlert } from "blessing-ui";

API

Props

Name	Type	Default	Description
title	string	—
color	"text" | "accent" | "danger" | "warning" | "success" | "info"	"text"
live	"status" | "alert" | "none"	"status"	assertive (role=alert) vs polite (role=status)
dismissible	boolean	—
closeLabel	string	"Dismiss"
modelValue	boolean	true

Events

Name	Payload	Description
update:modelValue	[value: boolean]
dismiss	[]

Slots

Name	Scope	Description
icon	—
title	—
default	—