Concorde UI component — Toast. Afficher un toast Doc ID: core/components/ui/toast/toast. Keywords: Concorde, supersoniks, core/components/ui/toast/toast, toast, Toast, UI component, sonic-toast, web component, success, error, warning, info, preserve: true, dismissForever: true, id, ghost: true. URL: https://concorde.supersoniks.org/crawl/core/components/ui/toast/toast.html.

Toast

Utilisation de base

<sonic-button onclick="window.SonicToast.add({ text: 'Message de notification simple' })">
      Afficher un toast
    </sonic-button>

Statut

Les statuts disponibles sont : success, error, warning, info ou vide (par défaut).

<div class="flex flex-wrap gap-2">
      <sonic-button onclick="window.SonicToast.add({ text: 'Message par défaut', status: '' })">
        Default
      </sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Opération réussie !', status: 'success' })">
        Success
      </sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Une erreur est survenue', status: 'error' })">
        Error
      </sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Attention à ce point', status: 'warning' })">
        Warning
      </sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Information importante', status: 'info' })">
        Info
      </sonic-button>
    </div>

Avec titre

<div class="flex flex-wrap gap-2">
      <sonic-button onclick="window.SonicToast.add({ title: 'Succès', text: 'Votre demande a été traitée avec succès.', status: 'success' })">
        Toast avec titre
      </sonic-button>
      <sonic-button onclick="window.SonicToast.add({ title: 'Test', text: 'Une erreur est survenue lors du traitement.', status: 'error' })">
        Toast d'erreur avec titre
      </sonic-button>
    </div>

Avec contenu HTML

Le contenu du toast peut contenir du HTML.

<sonic-button onclick="window.SonicToast.add({ text: 'Message avec <strong>HTML</strong> et un <a href=&quot;#&quot;>lien cliquable</a>', status: 'info' })">
      Toast avec HTML
    </sonic-button>

Persistance

Par défaut, les toasts disparaissent automatiquement. Avec preserve: true, le toast reste affiché jusqu'à ce qu'il soit fermé manuellement.

<sonic-button onclick="window.SonicToast.add({ text: 'Ce toast ne disparaîtra pas automatiquement', status: 'info', preserve: true })">
      Toast persistant
    </sonic-button>

Masquer définitivement

Avec dismissForever: true et un id, le toast peut être masqué définitivement. Une fois fermé, il ne réapparaîtra plus même après rechargement de la page.

<sonic-button onclick="window.SonicToast.add({ id: 'unique-toast-id', text: 'Ce toast peut être masqué définitivement', status: 'info', dismissForever: true })">
      Toast avec dismiss forever
    </sonic-button>

Fantôme

Avec ghost: true, le toast devient semi-transparent et non-interactif.

<sonic-button onclick="window.SonicToast.add({ text: 'Toast fantôme (semi-transparent)', status: 'info', ghost: true })">
      Toast ghost
    </sonic-button>

Méthodes de suppression

Tout supprimer

Supprime tous les toasts sauf ceux marqués comme ghost.

<div class="flex flex-wrap gap-2">
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 1', status: 'info' })">Ajouter toast 1</sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 2', status: 'success' })">Ajouter toast 2</sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast 3', status: 'warning' })">Ajouter toast 3</sonic-button>
      <sonic-button onclick="window.SonicToast.removeAll()">Supprimer tous</sonic-button>
    </div>

Supprimer par statut

Supprime tous les toasts d'un statut spécifique.

<div class="flex flex-wrap gap-2">
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast success', status: 'success' })">Success</sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast error', status: 'error' })">Error</sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast warning', status: 'warning' })">Warning</sonic-button>
      <sonic-button onclick="window.SonicToast.removeItemsByStatus('success')">Supprimer success</sonic-button>
      <sonic-button onclick="window.SonicToast.removeItemsByStatus('error')">Supprimer error</sonic-button>
    </div>

Supprimer les éléments temporaires

Supprime tous les toasts qui ne sont pas marqués comme preserve.

<div class="flex flex-wrap gap-2">
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast temporaire', status: 'info' })">Temporaire</sonic-button>
      <sonic-button onclick="window.SonicToast.add({ text: 'Toast persistant', status: 'success', preserve: true })">Persistant</sonic-button>
      <sonic-button onclick="window.SonicToast.removeTemporaryItems()">Supprimer temporaires</sonic-button>
    </div>

Exemple complet

<sonic-button onclick="window.SonicToast.add({ 
      id: 'welcome-toast',
      title: 'Bienvenue',
      text: 'Bienvenue sur notre plateforme ! Vous pouvez commencer à explorer les fonctionnalités.',
      status: 'success',
      dismissForever: true
    })">
      Toast complet
    </sonic-button>