Retours & statut

Alerte

تنبيهAlert

Stablesrc/dsm/components/alert.tsx
L'alerte signale un état du système ou le résultat d'une action : information, succès, avertissement ou erreur. Elle est autoportée et doit rester compréhensible même détachée de son contexte visuel.

Import

import { Alert } from "@/dsm/components/alert";

Exemples

Tons

Les quatre tons : information, succès, avertissement, erreur.

LTR

Nouvelle version du téléservice

Le portail Idarati.ma a été mis à jour le 12 septembre 2026.

Paiement confirmé

Votre cotisation CNSS du mois d'août a bien été enregistrée.

Avec ou sans titre

Le titre donne un repère de lecture rapide ; il reste facultatif.

LTR

Maintenance programmée

Le service sera indisponible dimanche 20 septembre de 2h à 4h pour une opération de maintenance.
Votre rendez-vous au centre CNIE de Marrakech est confirmé pour le 24 septembre à 10h.

Fermable

Une alerte que l'utilisateur peut masquer lui-même.

LTR

Chikaya.ma évolue

Vous pouvez désormais suivre l'instruction de votre réclamation en temps réel depuis votre espace personnel.

Taille compacte

Variante `sm`, pour une zone secondaire ou une barre latérale.

LTR

Dans un formulaire

Alertes empilées au-dessus des champs d'un formulaire de démarche.

LTR

Renouveler ma carte nationale d'identité

Astuce

Le numéro de CNIE figure au verso de votre carte actuelle, sous le code-barres.

Ce champ est obligatoire.

Usage

Quand l'utiliser

  • Utilisez `error` ou `warning` pour un blocage ou un risque qui empêche l'utilisateur de poursuivre sa démarche.
  • Utilisez `success` pour confirmer qu'une action a abouti (envoi, enregistrement, paiement validé).
  • Ajoutez un `title` dès que le message dépasse une phrase, pour donner un repère de lecture rapide.

Quand ne pas l'utiliser

  • N'utilisez pas une alerte pour un message qui doit disparaître de lui-même après quelques secondes : préférez une notification temporaire.
  • Ne rendez pas `closable` une alerte qui bloque la poursuite d'une démarche : l'utilisateur doit garder l'information sous les yeux.

Accessibilité & langues

Accessibilité

  • Les tons `warning` et `error` portent `role="alert"` (annonce immédiate) ; `info` et `success` portent `role="status"` (annonce polie).
  • L'icône de ton est décorative (`aria-hidden`) : l'information est toujours portée par le texte, jamais par la seule couleur.
  • Le bouton de fermeture reçoit un `aria-label` traduit (« Fermer ») fourni par le dictionnaire i18n, jamais un texte en dur.

RTL & multilingue

  • La bordure d'accent (`border-s-4`) est posée en logique de lecture : elle reste du côté « début » de la ligne, à droite en arabe.
  • La croix de fermeture n'est jamais retournée : son sens est fixe quel que soit le sens de lecture.

Propriétés

Alert
PropriétéTypeDéfautDescription
tone"info" | "success" | "warning" | "error"infoDétermine la couleur, l'icône et le rôle ARIA (`status` ou `alert`).
size"sm" | "md"mdTaille du texte, du padding et de l'icône.
titleReactNode—Titre court affiché en gras au-dessus du message.
closablebooleanfalseAffiche un bouton de fermeture ; l'alerte gère seule son démontage.
onClose() => void—Appelé juste après la fermeture, une fois l'alerte masquée.
classNamestring—Classes Tailwind supplémentaires.
childrenReactNode—Corps du message, affiché sous le titre s'il est présent.

Composants liés