Retours

<p role="alert">Message d’alerte neutre par défaut.</p>

<p role="alert" data-intent="info"><strong>Information :</strong> une mise à jour est disponible.</p>

<p role="alert" data-intent="success"><strong>Succès :</strong> votre fichier a bien été enregistré.</p>

<p role="alert" data-intent="warning"><strong>Attention :</strong> cette opération peut prendre du temps.</p>

<p role="alert" data-intent="danger"><strong>Erreur :</strong> la connexion a échoué.</p>

<p>
  <span data-badge>Défaut</span>
  <span data-badge="info">Info</span>
  <span data-badge="success">Publié</span>
  <span data-badge="warning">Brouillon</span>
  <span data-badge="danger">Archivé</span>
</p>

<p aria-busy="true">Chargement en cours…</p>

<button aria-busy="true" disabled>Envoi en cours…</button>

<aside data-component="callout">
  <p><strong>Note :</strong> Cette fonctionnalité nécessite JavaScript côté client.</p>
</aside>

<aside data-component="callout" data-intent="warning">
  <p><strong>Attention :</strong> Cette action est irréversible.</p>
</aside>

<div role="status" data-component="notification-bar">
  <p>Une nouvelle version de Peels est disponible.</p>
  <button type="button" aria-label="Fermer la notification">×</button>
</div>

<div role="alert" data-component="notification-bar" data-intent="warning">
  <p>Maintenance prévue ce soir à 22h00.</p>
  <button type="button" aria-label="Fermer la notification">×</button>
</div>