Alert
Surface de rétroaction pour les messages d'état, les résultats de validation et les avis système dans l'interface utilisateur PyColors.
Rétroaction en ligne pour les états de produits importantsLien vers la section
Les Alerte Le composant communique des informations importantes directement à l'intérieur de l'interface.
Utilisez-le pour:
- Avis neutres
- résultats de validation
- Confirmations de succès
- avertissements
- Erreurs de blocage
- messages système
Contrairement aux toasts, les alertes sont inline et persistant. Ils restent visibles dans le contexte jusqu'à ce que l'utilisateur comprenne ou résolve l'état.
Idée de base
Les alertes sont pour les messages qui appartiennent à la page. Les toasts sont des commentaires temporaires.
ImportationLien vers la section
import { Alert } from "@pycolors/ui";Utilisation de baseLien vers la section
Utilisez une alerte neutre pour les informations non critiques.
Tête haute
C’est un message neutre. Utilisez-le pour des informations non critiques.
Note typographique
Préférez le texte brut à l'intérieur AlertDescription. Évitez d'imbriquer
des balises de paragraphe supplémentaires lorsque le composant affiche déjà la
sémantique du texte.
Quand utiliser AlertLien vers la section
Utilisez Alerte lorsque le message doit rester visible dans son contexte.
Avis de page
Résultat de réussite
Erreur de blocage
VariantesLien vers la section
Les variantes reflètent la signification sémantique du message.
Information
Contexte utile pour l’utilisateur.
Succès
Vos modifications ont été sauvegardées.
Avertissement
Quelque chose peut nécessiter de l'attention.
Erreur
Nous n'avons pas pu sauvegarder vos modifications. Essaie encore.
Variantes disponiblesLien vers la section
| Variante | Objet |
|---|---|
default | Information neutre |
info | Information neutre, actuellement alignée avec la valeur par défaut |
success | Confirmation ou rétroaction positive |
warning | Risque ou attention requise |
destructive | Erreur ou message critique |
Comportement du token
default et info partager intentionnellement le même langage visuel dans le
jeu de tokens v1 actuel.
Annonces avec ariaLiveLien vers la section
Les ariaLive prop contrôle la façon dont les technologies d'assistance annoncent les mises à jour.
| Valeur | Rôle | Utilisation pour |
|---|---|---|
polite | status | Mises à jour non bloquantes |
assertive | alert | Erreurs critiques |
off | néant | Messages statiques qui n'ont pas besoin d'annonce |
Le résultat role et aria-live sont déterministes : elles sont toujours dérivées de ariaLive et avoir préséance sur tout natif role ou aria-live valeur passée à travers le reste des accessoires du composant.
Statut
Enregistré en arrière-plan.
Critique
Paiement échoué. Veuillez réessayer.
Silencieux
Pas d'annonce live pour ce message.
Règle d'accessibilité
Utilisation assertive Seulement pour les erreurs urgentes. L'utilisation
excessive d'annonces assertives crée une expérience bruyante pour les
utilisateurs de lecteurs d'écran.
Avec indicateurLien vers la section
Utilisation AlertIndicator avec AlertContent quand une icône aide à renforcer le message.
Vérifiez votre saisie
Certains champs peuvent être incomplets. Examen avant de soumettre.
Règle d'icône
Si l'icône est décorative, ajoutez aria-hidden="true". Le texte doit avoir
le sens.
UtilisationsLien vers la section
Utiliser des alertes en ligne pour les états persistants
Utilisez Alerte lorsque le message doit rester visible à proximité du contenu pertinent.
Utilisez la variante qui correspond à la signification
Choisir success, warningou destructive uniquement lorsque le message porte cette intention sémantique.
Garder la copie spécifique et actionnable
Expliquez ce qui s'est passé et ce que l'utilisateur peut faire ensuite.
N’annoncez que ce qui compte
Utilisation polite pour les mises à jour de statut et assertive uniquement pour les défaillances critiques.
Alerte vs ToastLien vers la section
| Situation | Utilisation |
|---|---|
| Erreur de page de blocage | Alerte |
| Résultat de validation au niveau du formulaire | Alerte |
| Avis persistant important | Alerte |
| Confirmation de sauvegarde temporaire | Toast |
| Mise à jour d'arrière-plan non bloquante | Toast |
| Annuler ou réessayer après la mutation | Toast |
Règle de décision
Si l'utilisateur a besoin du message pour terminer la tâche, utilisez Alerte. Si le message est une confirmation temporaire, utilisez Toast.
APILien vers la section
| Prop | Type | Par défaut | Désignation |
|---|---|---|---|
variant | AlertVariant | "default" | sémantique visuelle |
ariaLive | "off" | "polite" | "assertive" | "polite" | Comportement d'annonce d'assistance |
className | string | — | Classes Tailwind personnalisées |
Les composants d'alerte étendent les props HTML standard :
React.HTMLAttributes<HTMLDivElement>;TypeScript typesLien vers la section
export type AlertVariant = NonNullable<AlertProps["variant"]>;
export interface AlertProps
extends
React.HTMLAttributes<HTMLDivElement>,
VariantProps<typeof alertVariants> {
ariaLive?: "off" | "polite" | "assertive";
}AccessibilitéLien vers la section
ariaLive="polite"rendersrole="status".ariaLive="assertive"rendersrole="alert".ariaLive="off"supprime les annonces de live-region.- Le calcul
roleetaria-livene peut pas être remplacé silencieusement par d'autres accessoires;ariaLiveC’est la seule source de vérité. - Ne vous fiez pas uniquement à la couleur pour communiquer du sens.
- Les indicateurs décoratifs doivent utiliser
aria-hidden="true". - Gardez la copie d'alerte claire, courte et exploitable.
Préférez/évitezLien vers la section
Préférez
- copie courte et exploitable
- placement en ligne à proximité du problème
- Variantes sémantiques pour les états réels
- annonces polies par défaut
- assertif seulement pour les erreurs critiques
Éviter
- Utilisation des alertes pour les notifications temporaires
- copie vague comme "Quelque chose a mal tourné" seul
- couleur seule signification
- annonces assertives pour chaque message
- placer les alertes de blocage loin de la tâche