# Toast

## Utilisation de base

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

## Statut

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Avec titre

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Avec contenu HTML

Le contenu du toast peut contenir du HTML.

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>


## Persistance

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

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

## 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-code>
  <template>
    <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>
  </template>
</sonic-code>

## Fantôme

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

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


## Méthodes de suppression

### Tout supprimer

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

### Supprimer par statut

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

### Supprimer les éléments temporaires

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

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>

## Exemple complet

<sonic-code>
  <template>
    <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>
  </template>
</sonic-code>