Alert

Les alertes communiquent des messages contextuels importants sans interrompre le flux utilisateur. Elles existent en 4 variantes sémantiques alignées sur les couleurs du drapeau tchadien.

Variante	Classe	`role` ARIA	Usage
`info`	`tds-alert--info`	`status`	Information neutre, aide contextuelle
`success`	`tds-alert--success`	`status`	Confirmation, action réussie
`warning`	`tds-alert--warning`	`status`	Attention requise, non bloquant
`danger`	`tds-alert--danger`	`alert`	Erreur bloquante, action critique

Importation

@import "@tds-tchad/core/components/alert/alert.css";

import type { AlertVariant } from '@tds-tchad/core/components/alert';

Structure HTML complète

<div class="tds-alert tds-alert--info" role="status" aria-labelledby="alert-title">
  <!-- Icône optionnelle -->
  <svg class="tds-alert__icon" aria-hidden="true" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"/>
  </svg>

  <div class="tds-alert__content">
    <p class="tds-alert__title" id="alert-title">Demande reçue</p>
    <div class="tds-alert__body">
      Votre demande a été enregistrée sous la référence <strong>REF-2024-001234</strong>.
      Vous serez notifié par e-mail dans les 48 heures.
    </div>
  </div>

  <!-- Bouton de fermeture optionnel -->
  <button class="tds-alert__close" aria-label="Fermer cette notification" type="button">
    <svg aria-hidden="true" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
      <path d="M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"/>
    </svg>
  </button>
</div>

<!-- Erreur bloquante — annonce immédiate -->
<div class="tds-alert tds-alert--danger" role="alert" aria-live="assertive">
  ...
</div>

<!-- Confirmation — annonce polie -->
<div class="tds-alert tds-alert--success" role="status" aria-live="polite">
  ...
</div>