Alerte
`<gcds-alert>`

Autres noms : message, message ciblé.

L'alerte est un message déclenché par un événement qui communique une rétroaction contextuelle sans interrompre la tâche en cours.

GitHub
Figma

Aperçu du composant alerte

Sur cette page

Codage et accessibilité des alertes
Exemples
Générateur de code

Codage et accessibilité des alertes

Définissez le rôle de l’alerte

Utilisez l’attribut alert-role pour définir le rôle de l’alerte comme information, succès, avertissement ou danger. Ce choix détermine l’apparence visuelle de l’alerte et communique aux personnes le degré d’importance ou d’urgence du message.

Définissez le titre de l’alerte

Utilisez l’attribut heading pour créer un titre clair et informatif. Assurez-vous que le titre exprime clairement l’objectif du message.

Exemples

Explorez les différentes façons de configurer le composant. Chaque exemple présente une mise en œuvre fonctionnelle et du code prêt à copier.

Attributs essentiels

Ces attributs sont requis pour que le composant fonctionne correctement.

`heading`

Utilisez heading pour définir le titre de l’alerte.

<gcds-alert
  heading="Vous avez déjà une demande en cours"
></gcds-alert>

Attributs facultatifs

Ces attributs vous permettent de personnaliser ou d’enrichir le comportement et la présentation du composant.

`alert-role`

Utilisez alert-role pour définir le style de l’alerte. Choisissez l’une des valeurs suivantes :

info
success
warning
danger

<gcds-alert
  heading="Vos modifications ont été enregistrées"
  alert-role="success"
></gcds-alert>

`container`

Utilisez container pour définir la largeur du conteneur pour le contenu de l’alerte.

<gcds-alert
  heading="Vous avez déjà une demande en cours"
  container="sm"
></gcds-alert>

`hide-close-btn`

Définissez hide-close-btn à true pour masquer le bouton de fermeture. Par défaut, sa valeur est false, ce qui affiche le bouton de fermeture.

<gcds-alert
  heading="Vous avez déjà une demande en cours"
  hide-close-btn="true"
></gcds-alert>

`hide-role-icon`

Définissez hide-role-icon à true pour masquer l’icône associée au rôle de l’alerte. Par défaut, sa valeur est false, ce qui affiche l’icône.

<gcds-alert
  heading="Vous avez déjà une demande en cours"
  hide-role-icon="true"
></gcds-alert>

`is-fixed`

Définissez is-fixed à true pour fixer l’alerte en haut de la page. Par défaut, sa valeur est false.

<gcds-alert
  heading="Vous avez déjà une demande en cours"
  is-fixed="true"
></gcds-alert>

Emplacements (slots)

L’emplacement par défaut vous permet d’injecter du contenu personnalisé dans la zone de contenu principale du composant, et les emplacements nommés, dans des zones spécifiques.

`default`

Utilisez l’emplacement par défaut pour ajouter tout type de contenu au message de l’alerte, comme du texte, des liens ou des boutons.

<gcds-alert heading="Vous avez déjà une demande en cours">
  <p>Message.</p>
</gcds-alert>

Générateur de code

Générez une version du composant dont vous avez besoin en sélectionnant les propriétés de code correspondantes ou explorez les possibilités en choisissant différentes valeurs de code.

Choisissez des valeurs de code pour obtenir l'élément que vous voulez.
Obtenez le code et intégrez-le dans votre environnement.
Ajoutez tout contenu nécessaire au composant (comme le texte du libellé).

Remarque : Conformément à la pratique courante, le générateur de code utilise l'anglais pour tous les éléments de code.

Message.

Aidez-nous à nous améliorer

Vous avez des questions ou des demandes? Faites-nous part de vos commentaires à l'aide de notre formulaire de contact.

Quelque chose ne va pas? Signalez-le sur GitHub en créant un compte. Vous pourrez accéder aux réponses de l'équipe, suivre les progrès réalisés concernant votre problèmes et voir les problèmes signalés par d'autres personnes.

Fournir des commentaires

Signaler un problème sur GitHub

2026-09-09

Alerte<gcds-alert>