Retours & statut

Bandeau d'information

شريط إخباريNotice

Stablesrc/dsm/components/notice.tsx
Un bandeau pleine largeur, placé sous l'en-tête, pour une information valable pour tout le site : maintenance programmée, nouveau service, incident en cours.

Import

import { Notice } from "@/dsm/components/notice";

Exemples

Les trois tons

Information, avertissement et alerte.

LTR
Nouveau serviceLe renouvellement du passeport biométrique est désormais disponible en ligne.
Maintenance programméeLe portail sera indisponible dimanche 20 septembre de 2h à 5h du matin.

Avec fermeture

Un bandeau que l'utilisateur peut masquer, avec un lien d'action.

LTR
Idarati.ma évolueUn nouvel espace personnel regroupe désormais toutes vos démarches en cours.Découvrir le nouvel espace

Usage

Quand l'utiliser

  • Utilisez un bandeau `info` ou `warning` pour une information ou une maintenance qui concerne l'ensemble du site.
  • Réservez le ton `alert` à un incident réel affectant le service (panne, interruption).
  • Ajoutez `dismissible` pour une information que l'utilisateur peut choisir de masquer sans perdre en importance immédiate.

Quand ne pas l'utiliser

  • N'utilisez pas le bandeau pour un message propre à une seule page : `Alert` convient mieux, au plus près du contenu concerné.
  • N'empilez pas plusieurs bandeaux à la fois : un seul message prioritaire à la fois.

Accessibilité & langues

Accessibilité

  • Le ton `alert` porte `role="alert"` (annonce immédiate) ; les autres tons portent `role="status"` (annonce polie).
  • Le bouton de fermeture reçoit un `aria-label` traduit (« Masquer »).

RTL & multilingue

  • Le lien optionnel et le bouton de fermeture suivent l'ordre logique du texte ; aucune classe physique (`left`/`right`) n'est utilisée.

Propriétés

Notice
PropriétéTypeDéfautDescription
tone"info" | "warning" | "alert"infoCouleur, icône et rôle ARIA du bandeau.
titleReactNode—Titre court, affiché en gras.
descriptionReactNode—Texte complémentaire, affiché à la suite du titre.
link{ label: string; href: string }—Lien d'action affiché en fin de message.
dismissiblebooleanfalseAffiche un bouton de fermeture.
onDismiss() => void—Appelé juste après la fermeture.

Composants liés