Alerte

Une alerte dit au lecteur quelque chose sur la page ou sur l’action qu’il vient de faire. La couleur choisit à la fois l’icône et le rôle ARIA : danger et warning s’annoncent en role="alert", tout ce qui est plus calme devient un role="status" poli.

Couleurs

À noter
Une nouvelle version de sitelo est disponible.
Déployé
169 pages publiées en 1,7 seconde.
Note
Les îlots sont désactivés dans ce projet.
stack({ gap: 'sm' },
  alert({ color: 'primary', title: 'À noter' }, 'Une nouvelle version de sitelo est disponible.'),
  alert({ color: 'success', title: 'Déployé' }, '169 pages publiées en 1,7 seconde.'),
  alert({ color: 'warning', title: 'Page lente' }, 'Une page a mis plus de 500 ms à se rendre.'),
  alert({ color: 'danger', title: 'Build échoué' }, 'Deux liens internes pointent vers des pages inexistantes.'),
  alert({ color: 'neutral', title: 'Note' }, 'Les îlots sont désactivés dans ce projet.'),
)

Sans titre

Une alerte d’une ligne n’a pas besoin d’un titre au-dessus de la phrase.

Enregistré.
stack({ gap: 'sm' },
  alert({ color: 'success' }, 'Enregistré.'),
  alert({ color: 'danger' }, 'Cette adresse e-mail est déjà utilisée.'),
)

Variantes

stack({ gap: 'sm' },
  alert({ color: 'warning', variant: 'soft', title: 'Soft' }, 'Le défaut — une surface teintée.'),
  alert({ color: 'warning', variant: 'outline', title: 'Outline' }, 'Transparente, avec une bordure colorée.'),
  alert({ color: 'warning', variant: 'solid', title: 'Solid' }, 'La couleur pleine de la palette, pour ce qu’il ne faut surtout pas manquer.'),
)

Icônes

Chaque couleur a une icône par défaut. Passez votre propre balisage dans icon, ou icon: false pour aucune.

Sans icône
Rien que le texte.
Une icône personnalisée
N’importe quel SVG convient — les icônes sont du balisage, pas une dépendance.
stack({ gap: 'sm' },
  alert({ color: 'primary', icon: false, title: 'Sans icône' }, 'Rien que le texte.'),
  alert({
    color: 'primary',
    title: 'Une icône personnalisée',
    icon: icon('star'),
  }, 'N’importe quel SVG convient — les icônes sont du balisage, pas une dépendance.'),
)

Fermable

Le bouton de fermeture porte son propre gestionnaire :

onclick="import('/su/alert.js').then(m=>m.dismiss(this))"

L’alerte ci-dessous se ferme donc vraiment alors que cette page n’importe rien. Si ce module n’arrive jamais, le bouton s’affiche et ne fait rien — raison pour laquelle une alerte ne devrait jamais être le seul endroit où un message apparaît.

Fermable
Cliquez sur la × — le gestionnaire se télécharge au premier clic.
alert({ color: 'primary', title: 'Fermable', dismissible: true },
  'Cliquez sur la × — le gestionnaire se télécharge au premier clic.',
)

Contenu riche

Les alertes acceptent n’importe quels enfants : une action ou une liste peut vivre à l’intérieur.

alert({ color: 'danger', title: 'Vérification des liens échouée' },
  stack({ gap: 'sm' },
    text({ variant: 'small' }, 'Deux liens pointent vers des pages qui n’ont pas été générées :'),
    list({ plain: true },
      listItem({ title: '/docs/old-routing', description: 'lié depuis /docs' }),
      listItem({ title: '/blog/draft', description: 'lié depuis /blog' }),
    ),
    stack({ direction: 'row', gap: 'sm' },
      button({ size: 'sm', color: 'danger' }, 'Voir le détail'),
      button({ size: 'sm', variant: 'ghost', color: 'danger' }, 'Ignorer'),
    ),
  ),
)

Props

PropTypeDéfautDescription
color'primary' | 'neutral' | 'success' | 'warning' | 'danger''primary'Choisit la palette, l’icône par défaut et le rôle ARIA.
variant'soft' | 'outline' | 'solid''soft'Le poids visuel de l’alerte.
titleChild—Première ligne en gras.
iconChild | false—Balisage d’icône personnalisé, ou false pour aucune.
dismissiblebooleanfalseAjoute un bouton de fermeture qui importe son propre gestionnaire.
dismissLabelstring'Dismiss'Nom accessible de ce bouton.