Toasts

Los toasts son notificaciones ligeras diseñadas para imitar las notificaciones push que han sido popularizadas por los sistemas operativos móviles y de escritorio. Están construidos con flexbox, por lo que son fáciles de alinear y posicionar.

Descripción general

Cosas a saber cuando usas el plugin toast:

• Los toasts son opt-in por motivos de rendimiento, así que debes inicializarlos tú mismo.
• Los toasts se ocultarán automáticamente si no especificas autohide: false.

Ejemplos

Básico

Para fomentar toasts extensibles y predecibles, recomendamos un encabezado y un cuerpo. Los encabezados de los toasts usan display: flex, permitiendo una alineación fácil del contenido gracias a nuestras utilidades de margen y flexbox.

Los toasts son tan flexibles como necesites y tienen muy poco markup requerido. Como mínimo, requerimos un solo elemento para contener tu contenido “tostado” y recomendamos encarecidamente un botón de cierre.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Ejemplo en vivo

Haz clic en el botón de abajo para mostrar un toast (posicionado con nuestras utilidades en la esquina inferior derecha) que ha estado oculto por defecto.

<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Usamos el siguiente JavaScript para activar nuestra demostración de toast en vivo:

const toastTrigger = document.getElementById('liveToastBtn')
const toastLiveExample = document.getElementById('liveToast')

if (toastTrigger) {
  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)
  toastTrigger.addEventListener('click', () => {
    toastBootstrap.show()
  })
}

Translúcido

Los toasts son ligeramente translúcidos para integrarse con lo que hay debajo de ellos.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small class="text-body-secondary">11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Apilamiento

Puedes apilar toasts envolviéndolos en un contenedor toast, que añadirá algo de espaciado vertical.

<div class="toast-container position-static">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">just now</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      See? Just like this.
    </div>
  </div>

  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small class="text-body-secondary">2 seconds ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Heads up, toasts will stack automatically
    </div>
  </div>
</div>

Contenido personalizado

Personaliza tus toasts eliminando subcomponentes, ajustándolos con utilidades, o agregando tu propio markup. Aquí hemos creado un toast más simple eliminando el .toast-header por defecto, agregando un icono de cierre personalizado de Bootstrap Icons, y usando algunas utilidades de flexbox para ajustar el diseño.

<div class="toast align-items-center" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Alternativamente, también puedes agregar controles y componentes adicionales a los toasts.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-body">
    Hello, world! This is a toast message.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-primary btn-sm">Take action</button>
      <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="toast">Close</button>
    </div>
  </div>
</div>

Esquemas de color

Basándonos en el ejemplo anterior, puedes crear diferentes esquemas de color para los toasts con nuestras utilidades de color y background. Aquí hemos añadido .text-bg-primary al .toast, y luego hemos añadido .btn-close-white a nuestro botón de cierre. Para un borde nítido, eliminamos el borde por defecto con .border-0.

<div class="toast align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="d-flex">
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
</div>

Ubicación

Coloca los toasts con CSS personalizado según los necesites. La esquina superior derecha se usa a menudo para notificaciones, al igual que el centro superior. Si solo vas a mostrar un toast a la vez, pon los estilos de posicionamiento directamente en el .toast.

<form>
  <div class="mb-3">
    <label for="selectToastPlacement">Toast placement</label>
    <select class="form-select mt-2" id="selectToastPlacement">
      <option value="" selected>Select a position...</option>
      <option value="top-0 start-0">Top left</option>
      <option value="top-0 start-50 translate-middle-x">Top center</option>
      <option value="top-0 end-0">Top right</option>
      <option value="top-50 start-0 translate-middle-y">Middle left</option>
      <option value="top-50 start-50 translate-middle">Middle center</option>
      <option value="top-50 end-0 translate-middle-y">Middle right</option>
      <option value="bottom-0 start-0">Bottom left</option>
      <option value="bottom-0 start-50 translate-middle-x">Bottom center</option>
      <option value="bottom-0 end-0">Bottom right</option>
    </select>
  </div>
</form>
<div aria-live="polite" aria-atomic="true" class="bg-body-secondary position-relative bd-example-toasts rounded-3">
  <div class="toast-container p-3" id="toastPlacement">
    <div class="toast">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small>11 mins ago</small>
      </div>
      <div class="toast-body">
        Hello, world! This is a toast message.
      </div>
    </div>
  </div>
</div>

Para sistemas que generan más notificaciones, considera usar un elemento contenedor para que se puedan apilar fácilmente.

<div aria-live="polite" aria-atomic="true" class="position-relative">
  <!-- Position it: -->
  <!-- - `.toast-container` for spacing between toasts -->
  <!-- - `top-0` & `end-0` to position the toasts in the upper right corner -->
  <!-- - `.p-3` to prevent the toasts from sticking to the edge of the container  -->
  <div class="toast-container top-0 end-0 p-3">

    <!-- Then put toasts within -->
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">just now</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        See? Just like this.
      </div>
    </div>

    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <img src="..." class="rounded me-2" alt="...">
        <strong class="me-auto">Bootstrap</strong>
        <small class="text-body-secondary">2 seconds ago</small>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        Heads up, toasts will stack automatically
      </div>
    </div>
  </div>
</div>

También puedes ser creativo con las utilidades de flexbox para alinear los toasts horizontal y/o verticalmente.

<!-- Flexbox container for aligning the toasts -->
<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center w-100">

  <!-- Then put toasts within -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>11 mins ago</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Hello, world! This is a toast message.
    </div>
  </div>
</div>

Accesibilidad

Los toasts están diseñados para ser pequeñas interrupciones para tus visitantes o usuarios, así que para ayudar a quienes usan lectores de pantalla y tecnologías de asistencia similares, deberías envolver tus toasts en una región aria-live. Los cambios en las regiones en vivo (como inyectar/actualizar un componente toast) son anunciados automáticamente por los lectores de pantalla sin necesidad de mover el foco del usuario ni interrumpirlo de otra manera. Además, incluye aria-atomic="true" para asegurar que el toast completo siempre se anuncie como una sola unidad (atómica), en lugar de anunciar solo lo que cambió (lo que podría causar problemas si solo actualizas parte del contenido del toast, o si muestras el mismo contenido del toast en un momento posterior). Si la información necesaria es importante para el proceso, por ejemplo para una lista de errores en un formulario, entonces usa el componente alert en lugar de un toast.

Ten en cuenta que la región en vivo debe estar presente en el markup antes de que el toast se genere o actualice. Si generas ambos dinámicamente al mismo tiempo y los inyectas en la página, generalmente no serán anunciados por las tecnologías de asistencia.

También necesitas adaptar el role y el nivel de aria-live según el contenido. Si es un mensaje importante como un error, usa role="alert" aria-live="assertive", de lo contrario usa los atributos role="status" aria-live="polite".

A medida que cambia el contenido que muestras, asegúrate de actualizar el timeout de delay para que los usuarios tengan suficiente tiempo para leer el toast.

<div class="toast" role="alert" aria-live="polite" aria-atomic="true" data-bs-delay="10000">
  <div role="alert" aria-live="assertive" aria-atomic="true">...</div>
</div>

Cuando uses autohide: false, debes agregar un botón de cierre para permitir a los usuarios descartar el toast.

<div role="alert" aria-live="assertive" aria-atomic="true" class="toast" data-bs-autohide="false">
  <div class="toast-header">
    <img src="..." class="rounded me-2" alt="...">
    <strong class="me-auto">Bootstrap</strong>
    <small>11 mins ago</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Hello, world! This is a toast message.
  </div>
</div>

Aunque técnicamente es posible agregar controles enfocables/accionables (como botones o enlaces adicionales) en tu toast, deberías evitar hacer esto para toasts con auto-ocultado. Incluso si le das al toast un timeout de delay largo, los usuarios de teclado y tecnologías de asistencia pueden encontrar difícil llegar al toast a tiempo para tomar acción (ya que los toasts no reciben foco cuando se muestran). Si absolutamente necesitas controles adicionales, recomendamos usar un toast con autohide: false.

CSS

Variables

Como parte del enfoque evolutivo de variables CSS de Bootstrap, los toasts ahora usan variables CSS locales en .toast para una personalización en tiempo real mejorada. Los valores de las variables CSS se establecen vía Sass, por lo que la personalización con Sass también sigue siendo compatible.

--#{$prefix}toast-zindex: #{$zindex-toast};
--#{$prefix}toast-padding-x: #{$toast-padding-x};
--#{$prefix}toast-padding-y: #{$toast-padding-y};
--#{$prefix}toast-spacing: #{$toast-spacing};
--#{$prefix}toast-max-width: #{$toast-max-width};
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
--#{$prefix}toast-color: #{$toast-color};
--#{$prefix}toast-bg: #{$toast-background-color};
--#{$prefix}toast-border-width: #{$toast-border-width};
--#{$prefix}toast-border-color: #{$toast-border-color};
--#{$prefix}toast-border-radius: #{$toast-border-radius};
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
--#{$prefix}toast-header-color: #{$toast-header-color};
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};

Variables Sass

$toast-max-width:                   350px;
$toast-padding-x:                   .75rem;
$toast-padding-y:                   .5rem;
$toast-font-size:                   .875rem;
$toast-color:                       null;
$toast-background-color:            rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-border-width:                var(--#{$prefix}border-width);
$toast-border-color:                var(--#{$prefix}border-color-translucent);
$toast-border-radius:               var(--#{$prefix}border-radius);
$toast-box-shadow:                  var(--#{$prefix}box-shadow);
$toast-spacing:                     $container-padding-x;

$toast-header-color:                var(--#{$prefix}secondary-color);
$toast-header-background-color:     rgba(var(--#{$prefix}body-bg-rgb), .85);
$toast-header-border-color:         $toast-border-color;

Uso

Inicializa los toasts vía JavaScript:

const toastElList = document.querySelectorAll('.toast')
const toastList = [...toastElList].map(toastEl => new bootstrap.Toast(toastEl, option))

Disparadores

El cierre se puede lograr con el atributo data-bs-dismiss en un botón dentro del toast como se demuestra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>

o en un botón fuera del toast usando el data-bs-target adicional como se demuestra a continuación:

<button type="button" class="btn-close" data-bs-dismiss="toast" data-bs-target="#my-toast" aria-label="Close"></button>

Opciones

Como las opciones se pueden pasar vía atributos data o JavaScript, puedes añadir un nombre de opción a data-bs-, como en data-bs-animation="{value}". Asegúrate de cambiar el tipo de capitalización del nombre de la opción de “camelCase” a “kebab-case” al pasar las opciones vía atributos data. Por ejemplo, usa data-bs-custom-class="beautifier" en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes soportan un atributo data reservado experimental data-bs-config que puede albergar una configuración simple del componente como una cadena JSON. Cuando un elemento tiene los atributos data-bs-config='{"delay":0, "title":123}' y data-bs-title="456", el valor final de title será 456 y los atributos data separados sobrescribirán los valores dados en data-bs-config. Además, los atributos data existentes pueden albergar valores JSON como data-bs-delay='{"show":0,"hide":150}'.

El objeto de configuración final es el resultado de combinar data-bs-config, data-bs-, y el objeto js, donde el último par clave-valor dado sobrescribe a los demás.

Métodos

Eventos

const myToastEl = document.getElementById('myToast')
myToastEl.addEventListener('hidden.bs.toast', () => {
  // do something...
})