Alert

Candidate

Alert met en evidence une information importante liee au contexte courant. Son ton doit traduire la nature du message, jamais une preference decorative.

Variants

Tone	Usage
`success`	Confirmation d’une action terminee
`info`	Information utile ou changement de contexte
`warning`	Risque non bloquant ou attention requise
`danger`	Erreur, echec ou consequence destructive
`neutral`	Information secondaire sans statut fonctionnel
`teal`	Contexte de confiance ou de conformite
`purple`	Information liee a Audience ou a une recommandation

Description

Le titre doit rester autonome. Ajouter une description uniquement lorsqu’elle aide a comprendre la consequence ou l’action suivante.

Dismissible

La fermeture est optionnelle. L’utiliser seulement si masquer le message ne fait perdre aucune information critique.

Le bouton emet pixel-alert-dismiss avant de masquer le composant. Une application React ou Astro peut ecouter cet evenement pour persister l’etat.

Astro

---
import Alert from '../components/ui/Alert.astro';
---

<Alert
  tone="warning"
  title="Domaine non verifie"
  icon="warning"
  dismissible
  dismissLabel="Fermer l'avertissement"
>
  Verifiez le domaine avant d'activer ServerSide.
</Alert>

HTML output

<aside class="pixel-alert pixel-alert--warning" role="status">
  <span class="material-symbols-rounded" aria-hidden="true">warning</span>
  <div>
    <p>Domaine non verifie</p>
    <div>Verifiez le domaine avant d'activer ServerSide.</div>
  </div>
  <button type="button" aria-label="Fermer l'avertissement">
    <span class="material-symbols-rounded" aria-hidden="true">close</span>
  </button>
</aside>

Tokens

--alert-*-bg, --alert-*-border, --alert-*-fg, --alert-padding-*, --alert-gap, --alert-radius, --alert-border-width, --alert-icon-size, --alert-dismiss-*.

Do / Don’t

Do	Don’t
Choisir le ton selon la fonction du message.	Utiliser danger pour attirer visuellement l’attention.
Ecrire un titre court et directement comprehensible.	Commencer chaque titre par « Information ».
Expliquer une action corrective dans la description.	Ajouter un paragraphe marketing dans une Alert.
Garder les erreurs critiques visibles.	Rendre dismissible un blocage que l’utilisateur doit corriger.
Utiliser une icone coherente avec le statut.	Communiquer le statut uniquement par la couleur.

Accessibility

Danger utilise role="alert" par defaut ; les autres tons utilisent role="status". Pour une Alert deja presente au chargement, le role peut etre adapte afin d’eviter une annonce inutile. La croix est un bouton natif avec un libelle configurable. Le titre et l’icone restent visibles sans dependre uniquement de la couleur.

Status

Candidate. Les sept tons, la description et la fermeture optionnelle sont disponibles. Les actions secondaires et les alertes globales persistantes restent hors V1.