Easy Solutions - Composants / Alerte

Variantes

Six variantes sémantiques. Chacune adapte la couleur de fond, de bordure et du texte aux tokens DS correspondants.

Default

Message neutre ou informatif sans sévérité particulière.

Info

Une mise à jour est disponible pour votre application.

Succès

Votre profil a été enregistré avec succès.

Avertissement

Votre session expire dans 5 minutes.

Erreur

Une erreur est survenue. Veuillez réessayer.

Destructive

Action irréversible. Cette opération ne peut pas être annulée.

default Message neutre, fond card.

info Information contextuelle non critique.

success Confirmation d'une action réussie.

warning Avertissement, action risquée ou délai proche.

error Erreur bloquante nécessitant une correction.

destructive Action irréversible ou critique. Alias de error.

<twig:Alert variant="success"> <twig:ux:icon name="bi:check-circle" /> <twig:Alert:Title>Succès</twig:Alert:Title> <twig:Alert:Description>Profil enregistré.</twig:Alert:Description> </twig:Alert>

Avec icône

Placer un twig:ux:icon en premier enfant direct active automatiquement la mise en page en deux colonnes (icône + contenu).

Information

Votre session expire dans 10 minutes.

Erreur de validation

Veuillez corriger les champs en rouge avant de continuer.

<twig:Alert> <twig:ux:icon name="bi:info-circle" /> <twig:Alert:Title>Information</twig:Alert:Title> <twig:Alert:Description>Votre session expire dans 10 minutes.</twig:Alert:Description> </twig:Alert>

Avec action

Alert:Action positionne un bouton ou lien en haut à droite de l'alerte. À utiliser pour une action directement liée au message (fermer, renouveler, etc.).

Mise à jour disponible

Une nouvelle version est prête à être installée.

Abonnement expiré

Votre accès sera suspendu le 31 décembre.

Renouveler

<twig:Alert> <twig:ux:icon name="bi:arrow-clockwise" /> <twig:Alert:Title>Mise à jour disponible</twig:Alert:Title> <twig:Alert:Description>Une nouvelle version est prête.</twig:Alert:Description> <twig:Alert:Action> <twig:Button size="sm" variant="outline">Mettre à jour</twig:Button> </twig:Alert:Action> </twig:Alert>

API du composant

Composant	Prop	Type	Défaut	Description
`twig:Alert`	`variant`	string	`'default'`	`default` `info` `success` `warning` `error` `destructive`. Détermine la couleur et le style de l'alerte.
`twig:Alert:Title`				Titre en gras. S'aligne automatiquement sur la 2e colonne quand une icône est présente.
`twig:Alert:Description`				Texte descriptif. Accepte du HTML riche (liens, `<strong>`, etc.).
`twig:Alert:Action`				Conteneur positionné en haut à droite. Typiquement un `twig:Button`.
icône directe				`twig:ux:icon` placé en premier enfant active la mise en page icône + contenu.

Do & Don't

Utiliser destructive uniquement pour les erreurs bloquantes
Toujours inclure un Alert:Title pour le contexte
Ajouter une icône pour renforcer le niveau de sévérité visuellement
Utiliser Alert:Action pour les actions directement liées au message

Ne pas utiliser destructive pour des informations non critiques
Ne pas empiler plus de 3 alertes sur une même page
Ne pas coder une alerte manuellement avec des classes CSS custom
Ne pas placer l'icône à l'intérieur de Alert:Title ou Alert:Description

Règles

Règle

Toujours utiliser <twig:Alert> avec ses sous-composants. Ne jamais coder une alerte manuellement avec des classes ds-alert-*.

Règle

Le role="alert" est posé automatiquement par le composant. Ne pas l'ajouter manuellement dans le template parent.

Règle

L'icône doit être le premier enfant direct de twig:Alert pour activer la mise en page en grille deux colonnes.