ComposantsJavaScript requis

Toasts

Un toast est une notification brève et non bloquante : confirmation d’un virement, enregistrement d’un brouillon. Il s’affiche dans un coin de l’écran, puis disparaît seul ou à la demande.

Exemple de base#

Un toast comporte un en-tête facultatif (titre, horodatage, bouton de fermeture) et un corps. Ici il est déjà visible avec la classe .show. Le bouton de fermeture fonctionne sans script.

Votre virement de 150 000 FCFA a bien été envoyé.

<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">BDU CI</strong>
    <small class="text-body-secondary">à l'instant</small>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
  </div>
  <div class="toast-body">Votre virement de 150 000 FCFA a bien été envoyé.</div>
</div>

Sans en-tête et couleurs#

Le toast peut se limiter au corps. Pour le colorer, utilisez .text-bg-* avec .border-0, et .btn-close-white pour le bouton. Rappel : text-bg-secondary et text-bg-success donnent le même vert.

Opération enregistrée.

Votre carte a été activée.

Le virement a échoué : solde insuffisant.

<div class="d-flex flex-column gap-3">
  <div class="toast show align-items-center text-bg-primary border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">Opération enregistrée.</div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Fermer"></button>
    </div>
  </div>
  <div class="toast show align-items-center text-bg-success border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">Votre carte a été activée.</div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Fermer"></button>
    </div>
  </div>
  <div class="toast show align-items-center text-bg-danger border-0" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="d-flex">
      <div class="toast-body">Le virement a échoué : solde insuffisant.</div>
      <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast" aria-label="Fermer"></button>
    </div>
  </div>
</div>

Empilement#

.toast-container regroupe plusieurs toasts et les espace. Les toasts qui se suivent s’empilent dans l’ordre du HTML. Ajoutez .position-static pour garder le conteneur dans la page ; sinon voyez la section suivante.

75 000 FCFA ont été crédités sur votre compte courant.

Votre mensualité de prêt est prélevée demain.

<div class="toast-container position-static">
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Virement reçu</strong>
      <small class="text-body-secondary">il y a 2 min</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
    </div>
    <div class="toast-body">75 000 FCFA ont été crédités sur votre compte courant.</div>
  </div>
  <div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">Rappel</strong>
      <small class="text-body-secondary">à l'instant</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
    </div>
    <div class="toast-body">Votre mensualité de prêt est prélevée demain.</div>
  </div>
</div>

Positionner et afficher par JavaScript#

Placez un conteneur fixe en bas à droite et affichez les toasts depuis le code. Ce modèle n’est pas exécuté dans l’aperçu : copiez-le dans votre page. La zone aria-live doit exister dans le HTML avant l’apparition des toasts.

<button type="button" class="btn btn-primary" id="bouton-toast">Envoyer le virement</button>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="toast-virement" class="toast" role="status" aria-live="polite" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">BDU CI</strong>
      <small>à l'instant</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
    </div>
    <div class="toast-body">Virement envoyé.</div>
  </div>
</div>

Script d'affichage#

Un toast n’est jamais ouvert automatiquement : créez l’instance puis appelez show(). Les options peuvent venir du constructeur ou des attributs data-bs-*.

const element = document.getElementById('toast-virement');
const toast = bootstrap.Toast.getOrCreateInstance(element, {
  autohide: true,
  delay: 6000,
});

document.getElementById('bouton-toast').addEventListener('click', () => toast.show());

element.addEventListener('hidden.bs.toast', () => {
  console.log('Toast masqué');
});

Disparition automatique#

Par défaut, un toast disparaît après 5 secondes. Le survol ou le focus du toast suspend le compte à rebours. data-bs-autohide="false" le laisse affiché jusqu’à ce que l’utilisateur le ferme ; data-bs-delay change la durée en millisecondes.

Confirmez votre numéro de téléphone pour sécuriser vos paiements.

<div class="toast show" data-bs-autohide="false" role="alert" aria-live="assertive" aria-atomic="true">
  <div class="toast-header">
    <strong class="me-auto">Action requise</strong>
    <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Fermer"></button>
  </div>
  <div class="toast-body">Confirmez votre numéro de téléphone pour sécuriser vos paiements.</div>
</div>

Options

Options passées au constructeur ou par attribut sur le toast (data-bs-animation, data-bs-autohide, data-bs-delay).

Options
Option	Type	Défaut	Description
`animation`	boolean	`true`	Applique un fondu à l’apparition et à la disparition.
`autohide`	boolean	`true`	Masque le toast automatiquement après le délai.
`delay`	number	`5000`	Délai en millisecondes avant le masquage automatique.

Méthodes

Méthodes
Méthode	Description
`show()`	Affiche le toast. À appeler explicitement : il n’est pas affiché automatiquement.
`hide()`	Masque le toast. Sans effet s’il n’est pas affiché.
`isShown()`	Renvoie `true` si le toast est affiché.
`dispose()`	Détruit l’instance (masque d’abord le toast s’il est affiché).
`bootstrap.Toast.getInstance(element)`	Renvoie l’instance liée à l’élément, ou `null`.
`bootstrap.Toast.getOrCreateInstance(element, options)`	Renvoie l’instance, ou la crée.

Événements

Événements
Événement	Déclenché quand
`show.bs.toast`	L’affichage est demandé. Annulable avec `preventDefault()`.
`shown.bs.toast`	Le toast est visible, transition terminée.
`hide.bs.toast`	Le masquage est demandé. Annulable avec `preventDefault()`.
`hidden.bs.toast`	Le toast est masqué, transition terminée.

Attributs data-bs-*

Attributs data-bs-*
Attribut	Élément	Effet
`data-bs-dismiss="toast"`	Bouton dans le toast	Masque le toast au clic.
`data-bs-autohide`	Toast	Option `autohide`.
`data-bs-delay`	Toast	Option `delay`.
`data-bs-animation`	Toast	Option `animation`.

Variables Sass

Variables Sass
Variable	Valeur par défaut
`$toast-max-width`	`350px`
`$toast-padding-x`	`.75rem`
`$toast-padding-y`	`.5rem`
`$toast-font-size`	`.875rem`
`$toast-color`	`null`
`$toast-background-color`	`rgba(var(--bs-body-bg-rgb), .85)`
`$toast-border-width`	`var(--bs-border-width)`
`$toast-border-color`	`var(--bs-border-color-translucent)`
`$toast-border-radius`	`var(--bs-border-radius)`
`$toast-box-shadow`	`var(--bs-box-shadow)`
`$toast-spacing`	`$container-padding-x`
`$toast-header-color`	`var(--bs-secondary-color)`
`$toast-header-background-color`	`rgba(var(--bs-body-bg-rgb), .85)`
`$zindex-toast`	`1090`

Personnalisation#

Surchargez les variables CSS --bs-toast-* sur un toast précis, ou changez les variables Sass pour tous.

// Sass : toasts plus larges et plus opaques
$toast-max-width: 420px;
$toast-background-color: rgba($white, 0.97);

// CSS : un toast précis
.toast-confirmation {
  --bs-toast-max-width: 420px;
  --bs-toast-border-color: #387A1B;
  --bs-toast-header-color: #1f2a37;
}

Bonnes pratiques

À faire

Gardez le message court et factuel : ce qui s’est passé, sans action obligatoire.
Donnez à l’utilisateur le temps de lire : 5 secondes minimum, davantage si le message est long.
Placez les toasts dans un conteneur unique (.toast-container) pour qu’ils s’empilent proprement.
Prévoyez la zone aria-live dans le HTML dès le chargement de la page.

À éviter

N’utilisez pas un toast pour une information critique ou une erreur à corriger : préférez une alerte dans la page.
Ne mettez pas de bouton d’action indispensable dans un toast qui disparaît seul.
N’affichez pas plusieurs toasts à la fois pour un même événement.

Accessibilité

Un toast est une région vive : role="alert" avec aria-live="assertive" pour une information urgente, role="status" avec aria-live="polite" pour une information courante ; aria-atomic="true" pour lire le message en entier.
Le conteneur ou la zone aria-live doit déjà être dans la page avant l’apparition du message, sinon certains lecteurs d’écran ne l’annoncent pas.
Le survol et le focus suspendent le masquage automatique : un utilisateur au clavier a le temps de lire. Pour un message long, désactivez autohide.
Le bouton de fermeture doit avoir un aria-label (« Fermer »).