Components

Toasts

Deliver temporary status notifications with contextual styles, pause-aware autohide, dismissal, and lifecycle events.

Components guideInteractive controllerv0.7.0 current

Components

Toast notifications

Place toasts in a region that does not block the page. The controller synchronizes state, pauses autohide while the toast is hovered or focused, and emits cancelable lifecycle events.

Trigger and dismiss

HTML · Triggered toast

<button type="button" data-bs-toggle="toast" aria-controls="saved-toast">Show notification</button>
<div class="bs-toast-region" aria-label="Notifications">
  <div id="saved-toast" class="bs-toast bs-toast-success" data-bs-toast hidden>
    <div><strong class="bs-toast-title">Saved</strong><div class="bs-toast-message">Your changes are secure.</div></div>
    <button class="bs-toast-dismiss" type="button" data-bs-toast-dismiss aria-label="Dismiss notification"><i data-lucide="x" class="bs-icon" aria-hidden="true"></i></button>
  </div>
</div>

Position and variants

New update

A newer build is ready.

Connection unstable

Changes will retry automatically.

Upload failed

Choose a smaller file and try again.

HTML · Region placement

<div class="bs-toast-region bs-toast-region-bottom bs-toast-region-start" aria-label="Notifications">
  <div class="bs-toast bs-toast-warning" data-bs-toast>...</div>
</div>

JavaScript · Toast controller

import { Toast, initToasts } from "@boobstrap/boobstrap/js/toast";

const toasts = initToasts(document);
Toast.getOrCreateInstance(document.querySelector("#saved-toast")).show();

React

useToast owns visibility and the autohide timer. The returned toast props pause the remaining duration while the notification is hovered or contains focus, then resume it afterward.

JSX · React toast

import { useToast } from "@boobstrap/react";

export function SavedToast() {
  const toast = useToast({ duration: 5000 });

  return (
    <>
      <button className="bs-btn" {...toast.getTriggerProps()}>Save changes</button>
      <div className="bs-toast-region">
        <div className="bs-toast bs-toast-success" {...toast.getToastProps()}>
          <div><strong className="bs-toast-title">Saved</strong>
            <p className="bs-toast-message">Your changes are live.</p></div>
          <button className="bs-toast-dismiss" {...toast.getDismissProps()}>&times;</button>
        </div>
      </div>
    </>
  );
}

Vue

Vue exposes the same timer, announcement, and dismissal contract through useToast. Template refs and pause/resume handlers are included in the prop objects.

Vue · Toast composable

<script setup>
import { useToast } from "@boobstrap/vue";

const toast = useToast({ duration: 5000 });
</script>

<template>
  <button class="bs-btn" v-bind="toast.getTriggerProps()">Save changes</button>
  <div class="bs-toast-region">
    <div class="bs-toast bs-toast-success" v-bind="toast.getToastProps()">
      <div><strong class="bs-toast-title">Saved</strong>
        <p class="bs-toast-message">Your changes are live.</p></div>
      <button class="bs-toast-dismiss" v-bind="toast.getDismissProps()">&times;</button>
    </div>
  </div>
</template>

See the React adapter guide and Vue adapter guide for controlled visibility, transition detail, SSR, and the one-owner rule.

Announcements

The controller supplies role="status" and aria-live="polite" unless you provide a more appropriate live-region contract.

Autohide

Set data-bs-toast-duration in milliseconds or disable automatic dismissal with data-bs-toast-autohide="false".

Important actions

Do not use a temporary toast for destructive confirmations or information the user must retain.

Toast API

Class or hook	Purpose
`.bs-toast-region`, `.bs-toast-region-bottom`, `.bs-toast-region-start`	Fixed, pointer-safe notification stack and logical placement.
`.bs-toast`	Notification surface and transition state.
`.bs-toast-info`, `.bs-toast-success`, `.bs-toast-warning`, `.bs-toast-danger`	Contextual accents.
`.bs-toast-title`, `.bs-toast-message`, `.bs-toast-dismiss`	Structured content and dismissal control.
`data-bs-toast`	Initializes the controller.
`data-bs-toast-dismiss`	Dismisses the containing toast.
`bs:toast:{show\|shown\|hide\|hidden}`	Cancelable before-events and completion events.