Notification toast

Messages éphémères pour confirmer une action ou signaler un événement. Disparaissent automatiquement après quelques secondes. API programmatique via toast() ou déclencheurs déclaratifs.

Démonstration

Structure HTML (aperçu)

Pour la démo, le conteneur est forcé en position relative ; en production il reste fixe dans un coin de la fenêtre.

Information

Exemple de structure HTML.

Toast sans titre (avertissement).

<div class="bj-toast-container" aria-live="polite" role="status">
  <div class="bj-toast bj-toast--success" role="alert">
    <span class="bj-toast__icon" aria-hidden="true"><i class="ri-check-line"></i></span>
    <div class="bj-toast__body">
      <p class="bj-toast__title">Succès</p>
      <p class="bj-toast__text">Action enregistrée.</p>
    </div>
    <button type="button" class="bj-toast__close" aria-label="Fermer">…</button>
  </div>
</div>

Positions du conteneur

Par défaut : coin supérieur droit. Modificateurs pour les trois autres coins :

<!-- défaut : haut-droite -->
<div class="bj-toast-container">…</div>
<div class="bj-toast-container bj-toast-container--top-left">…</div>
<div class="bj-toast-container bj-toast-container--bottom-right">…</div>
<div class="bj-toast-container bj-toast-container--bottom-left">…</div>

Aperçu des quatre coins

Chaque vignette force le conteneur en position: relative pour l’aperçu ; en production le conteneur reste position: fixed.

Haut-gauche

Info

Haut-droite

Succès (défaut)

Bas-gauche

Attention

Bas-droite

Erreur

<!-- défaut : haut-droite -->
<div class="bj-toast-container">…</div>
<div class="bj-toast-container bj-toast-container--top-left">…</div>
<div class="bj-toast-container bj-toast-container--bottom-right">…</div>
<div class="bj-toast-container bj-toast-container--bottom-left">…</div>

Positions × variantes

Exemple statique : un type sémantique par coin pour illustrer bj-toast-container--* avec bj-toast--info|success|warning|error sur le toast.

TL + info

TR + succès

BL + avertissement

BR + erreur

<!-- Matrice démo : combiner conteneur + variante -->
<div class="bj-toast-container bj-toast-container--top-left" aria-live="polite" role="status">
  <div class="bj-toast bj-toast--info" role="alert">…</div>
</div>
<div class="bj-toast-container" aria-live="polite" role="status">
  <div class="bj-toast bj-toast--success" role="alert">…</div>
</div>
<div class="bj-toast-container bj-toast-container--bottom-left" aria-live="polite" role="status">
  <div class="bj-toast bj-toast--warning" role="alert">…</div>
</div>
<div class="bj-toast-container bj-toast-container--bottom-right" aria-live="polite" role="status">
  <div class="bj-toast bj-toast--error" role="alert">…</div>
</div>

Usage déclaratif

<button data-bj-toast-trigger
        data-bj-toast-type="success"
        data-bj-toast-title="Succès"
        data-bj-toast-text="Opération terminée.">
  Valider
</button>

Usage programmatique

import { toast } from '@flrxnt/dsbj';

toast({
  title: 'Succès',
  text: 'Le dossier a été soumis.',
  type: 'success',
  duration: 5000,
  position: 'top-right',
});

Classes CSS

Classe	Description
`bj-toast-container`	Conteneur fixe empilant les toasts.
`bj-toast`	Notification individuelle.
`bj-toast--info / success / warning / error`	Variante sémantique.
`bj-toast--removing`	Classe transitoire pendant la fermeture animée.
`bj-toast__icon`	Zone icône (décorative, aria-hidden sur l’icône).
`bj-toast__body`	Bloc texte (titre + message).
`bj-toast__title`	Titre optionnel.
`bj-toast__text`	Corps du message.
`bj-toast__close`	Bouton fermer.
`bj-toast__progress`	Barre de progression du délai.
`bj-toast-container--top-left`	Position coin supérieur gauche.
`bj-toast-container--bottom-right`	Position coin inférieur droit.
`bj-toast-container--bottom-left`	Position coin inférieur gauche.