Toasts

Estructura básica de toasts

Los toasts son componentes ligeros y discretos diseñados para mostrar notificaciones temporales sin interrumpir la experiencia del usuario. A diferencia de las alertas que forman parte del flujo del contenido, los toasts aparecen de manera superpuesta y se desvanecen automáticamente.

La estructura fundamental de un toast en Bootstrap se basa en tres clases principales que trabajan en conjunto para crear el componente completo. El contenedor principal utiliza la clase .toast, que define las propiedades básicas del componente como su apariencia, comportamiento y posicionamiento inicial.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Título del toast</strong>
    <small>hace 2 minutos</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
  </div>
  <div class="toast-body">
    Mensaje principal del toast que aparece aquí.
  </div>
</div>

Componente toast principal

El contenedor toast requiere varios atributos para funcionar correctamente con las tecnologías de asistencia. El atributo role="alert" indica que se trata de un mensaje importante, mientras que aria-live="assertive" hace que los lectores de pantalla anuncien el contenido inmediatamente cuando aparece.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <!-- Contenido del toast -->
</div>

El atributo aria-atomic="true" asegura que se lea todo el contenido del toast como una unidad completa, mejorando significativamente la accesibilidad del componente.

Toast header: cabecera del componente

La cabecera del toast utiliza la clase .toast-header y típicamente contiene el título, información temporal y el botón de cierre. Esta sección proporciona contexto sobre el origen o tipo de notificación.

<div class="toast-header">
  <strong class="me-auto">Notificación importante</strong>
  <small class="text-muted">hace 5 minutos</small>
  <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>

El botón de cierre incluye el atributo data-bs-dismiss="toast" que permite al usuario descartar manualmente la notificación. La clase me-auto en el título utiliza las utilidades de espaciado para empujar el contenido de la derecha hacia el final.

Toast body: contenido principal

El cuerpo del toast emplea la clase .toast-body y alberga el mensaje principal de la notificación. Esta área está diseñada para mostrar texto descriptivo, aunque puede incluir otros elementos básicos como enlaces o botones simples.

<div class="toast-body">
  El archivo se ha guardado correctamente en tu cuenta.
</div>

Comportamiento automático básico

Bootstrap incluye comportamiento automático mediante el atributo data-bs-autohide="true" (activado por defecto), que hace que el toast desaparezca automáticamente después de un tiempo determinado. Para mantener un toast visible hasta que el usuario lo cierre manualmente, se puede configurar con data-bs-autohide="false".

<div class="toast" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Acción requerida</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Por favor, confirma tu dirección de correo electrónico.
  </div>
</div>

La estructura básica mantiene la consistencia visual con otros componentes de Bootstrap mientras proporciona la flexibilidad necesaria para diferentes tipos de notificaciones. El diseño modular permite que tanto la cabecera como el cuerpo sean opcionales según las necesidades específicas del mensaje.

Contenido y elementos de toasts

Los toasts admiten una amplia variedad de contenido que permite crear notificaciones ricas e informativas. Más allá de la estructura básica, es posible enriquecer estos componentes con iconos, enlaces, botones y elementos visuales que mejoren la comunicación con el usuario.

Iconos y elementos visuales

La integración de iconos en los toasts mejora significativamente la comprensión inmediata del mensaje. Los iconos se pueden incluir tanto en la cabecera como en el cuerpo del toast, utilizando las utilidades de espaciado que ya conoces para mantener una alineación adecuada.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20">
      <rect width="100%" height="100%" fill="#198754"></rect>
    </svg>
    <strong class="me-auto">Operación exitosa</strong>
    <small>hace 1 minuto</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    El archivo se ha subido correctamente a tu carpeta.
  </div>
</div>

Para notificaciones de error o advertencia, puedes utilizar colores semánticos en los iconos que refuercen visualmente el tipo de mensaje:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <svg class="bd-placeholder-img rounded me-2" width="20" height="20">
      <rect width="100%" height="100%" fill="#dc3545"></rect>
    </svg>
    <strong class="me-auto">Error de conexión</strong>
    <small class="text-muted">hace 30 segundos</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    No se pudo establecer conexión con el servidor. Inténtalo de nuevo.
  </div>
</div>

Enlaces y botones en el contenido

El cuerpo del toast puede incluir enlaces y botones simples que proporcionen acciones relacionadas con la notificación. Estos elementos mantienen el estilo consistente con el resto de componentes de Bootstrap.

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Nueva actualización</strong>
    <small>hace 2 minutos</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Una nueva versión está disponible. 
    <a href="#" class="btn btn-primary btn-sm">Actualizar ahora</a>
  </div>
</div>

Los enlaces simples dentro del contenido utilizan las clases de color de Bootstrap para mantener la coherencia visual:

<div class="toast-body">
  Mensaje enviado correctamente. 
  <a href="#" class="link-primary">Ver en bandeja de salida</a>
</div>

Timestamps y información temporal

La información temporal proporciona contexto sobre cuándo ocurrió el evento. Bootstrap incluye la clase .text-muted para timestamps, creando una jerarquía visual apropiada sin competir con el contenido principal.

<div class="toast-header">
  <strong class="me-auto">Copia de seguridad completada</strong>
  <small class="text-muted">hace 15 minutos</small>
  <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>

Para notificaciones más específicas, puedes incluir información temporal más detallada:

<div class="toast-header">
  <strong class="me-auto">Reunión programada</strong>
  <small class="text-muted">Hoy a las 14:30</small>
  <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
</div>

Toasts de colores y estados

Bootstrap permite personalizar visualmente los toasts aplicando clases de color de fondo para diferentes tipos de notificaciones. Esto mejora la identificación rápida del tipo de mensaje.

Toast de éxito:

<div class="toast align-items-center text-bg-success border-0" role="alert">
  <div class="d-flex">
    <div class="toast-body">
      Perfil actualizado exitosamente.
    </div>
    <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
  </div>
</div>

Toast de advertencia:

<div class="toast align-items-center text-bg-warning border-0" role="alert">
  <div class="d-flex">
    <div class="toast-body">
      Tu sesión expirará en 5 minutos.
    </div>
    <button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast"></button>
  </div>
</div>

Contenido enriquecido con badges

Los badges pueden incluirse tanto en la cabecera como en el cuerpo para proporcionar información adicional como contadores, estados o categorías:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Notificaciones 
      <span class="badge bg-primary rounded-pill">3</span>
    </strong>
    <small>hace 1 minuto</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    Tienes 3 mensajes nuevos en tu bandeja de entrada.
  </div>
</div>

Toasts informativos con acciones

Para confirmaciones de acciones del usuario, los toasts pueden incluir botones de acción secundaria que permitan deshacer operaciones o acceder a información relacionada:

<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Elemento eliminado</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
  </div>
  <div class="toast-body">
    El documento ha sido movido a la papelera.
    <div class="mt-2 pt-2 border-top">
      <button type="button" class="btn btn-outline-primary btn-sm">Deshacer</button>
    </div>
  </div>
</div>

Este tipo de contenido enriquecido mantiene la funcionalidad de los toasts como notificaciones discretas mientras proporciona opciones de interacción útiles para mejorar la experiencia del usuario. La clave está en mantener el equilibrio entre funcionalidad y simplicidad, evitando sobrecargar el componente con demasiados elementos que puedan distraer de su propósito principal como sistema de notificación temporal.

Posicionamiento y contenedores

El posicionamiento efectivo de los toasts es crucial para mantener una experiencia de usuario no intrusiva. Bootstrap proporciona un sistema de contenedores específico que permite ubicar las notificaciones en diferentes áreas de la pantalla sin interferir con el contenido principal de la página.

Contenedores básicos de toasts

La clase .toast-container actúa como el elemento envolvente que define dónde aparecerán los toasts en la interfaz. Este contenedor debe posicionarse de forma absoluta o fija para garantizar que las notificaciones floten sobre el contenido existente.

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Guardado exitoso</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Los cambios se han guardado correctamente.
    </div>
  </div>
</div>

El contenedor con posicionamiento fijo permanece en la misma ubicación incluso cuando el usuario hace scroll en la página, ideal para notificaciones que requieren visibilidad constante.

Posiciones predefinidas en la pantalla

Bootstrap permite posicionar toasts en las esquinas y bordes de la ventana utilizando las utilidades de posicionamiento que ya conoces. Las combinaciones más comunes proporcionan ubicaciones naturales para diferentes tipos de notificaciones.

Esquina inferior derecha (posición por defecto):

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body">
      Notificación en esquina inferior derecha.
    </div>
  </div>
</div>

Esquina superior derecha para alertas importantes:

<div class="toast-container position-fixed top-0 end-0 p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Alerta de sistema</strong>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Mantenimiento programado en 10 minutos.
    </div>
  </div>
</div>

Centro superior para confirmaciones destacadas:

<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body">
      Producto añadido al carrito correctamente.
    </div>
  </div>
</div>

Agrupación de múltiples toasts

Cuando aparecen múltiples notificaciones, el contenedor las apila automáticamente manteniendo el espaciado apropiado entre cada toast. Las notificaciones más recientes aparecen en la parte superior del stack por defecto.

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <!-- Toast más reciente -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Mensaje enviado</strong>
      <small>hace 1 segundo</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      Tu mensaje ha sido enviado exitosamente.
    </div>
  </div>
  
  <!-- Toast anterior -->
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Archivo subido</strong>
      <small>hace 5 segundos</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      documento.pdf se ha subido a tu carpeta.
    </div>
  </div>
</div>

Contenedores responsivos

Para dispositivos móviles, es recomendable ajustar el posicionamiento de los toasts para optimizar el uso del espacio disponible. Las utilidades responsive permiten cambiar la ubicación según el tamaño de pantalla.

<div class="toast-container position-fixed bottom-0 end-0 start-0 start-md-auto p-3">
  <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-body">
      Configuración actualizada correctamente.
    </div>
  </div>
</div>

En este ejemplo, el toast ocupa todo el ancho en pantallas pequeñas (start-0) pero se posiciona en la esquina en dispositivos medianos y grandes (start-md-auto).

Posicionamiento contextual

Algunos casos requieren posicionar toasts cerca del elemento que activó la notificación. Para esto, se puede utilizar posicionamiento absoluto dentro de contenedores con position-relative.

<div class="position-relative">
  <button class="btn btn-primary" type="button">
    Guardar cambios
  </button>
  
  <!-- Toast contextual -->
  <div class="toast-container position-absolute top-100 end-0">
    <div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-body">
        Cambios guardados correctamente.
      </div>
    </div>
  </div>
</div>

Múltiples contenedores para diferentes tipos

Para organizar notificaciones por tipo o importancia, puedes utilizar múltiples contenedores en diferentes posiciones de la pantalla.

Notificaciones de éxito (esquina inferior derecha):

<div class="toast-container position-fixed bottom-0 end-0 p-3" id="success-toasts">
  <div class="toast align-items-center text-bg-success border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body">
        Operación completada exitosamente.
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  </div>
</div>

Alertas críticas (centro superior):

<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" id="critical-alerts">
  <div class="toast align-items-center text-bg-danger border-0" role="alert">
    <div class="d-flex">
      <div class="toast-body">
        Error crítico: Contacta con soporte técnico.
      </div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
    </div>
  </div>
</div>

Consideraciones de espaciado

El espaciado alrededor del contenedor es esencial para evitar que los toasts toquen los bordes de la pantalla. La clase p-3 proporciona padding uniforme, pero puedes ajustarlo según tus necesidades específicas.

<!-- Espaciado mínimo para móviles -->
<div class="toast-container position-fixed bottom-0 end-0 p-2 p-md-3">
  <!-- Toasts aquí -->
</div>

<!-- Espaciado mayor para desktop -->
<div class="toast-container position-fixed top-0 end-0 p-4">
  <!-- Toasts aquí -->
</div>

El sistema de contenedores de Bootstrap para toasts garantiza que las notificaciones aparezcan de manera consistente y organizada, independientemente de la cantidad de mensajes que se muestren simultáneamente. La flexibilidad del posicionamiento permite adaptar la ubicación de las notificaciones al contexto específico de cada aplicación, manteniendo siempre una experiencia de usuario coherente y no intrusiva.