Alerte

Alerte statique de niveau page (non impérative, à la différence de Message). La sémantique est reliée au rôle de zone live : warning/danger utilisent role="alert" pour une annonce immédiate, info/success utilisent role="status" pour une annonce plus discrète.

Utilisation de base

Quatre sémantiques

Un message neutre.

L'opération s'est terminée avec succès.

L'espace disque est presque saturé.

La connexion réseau a été interrompue.

<script setup lang="ts">
</script>

<template>
  <!-- Message neutre -->
  <LhAlert>Un message neutre.</LhAlert>
  <!-- success -->
  <LhAlert type="success">L'opération s'est terminée avec succès.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">L'espace disque est presque saturé.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">La connexion réseau a été interrompue.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Message neutre -->
  <LhAlert>Un message neutre.</LhAlert>
  <!-- success -->
  <LhAlert type="success">L'opération s'est terminée avec succès.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">L'espace disque est presque saturé.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">La connexion réseau a été interrompue.</LhAlert>
</template>

Icône et titre

Icône et titre

Enregistrement réussi

Le document a été synchronisé avec le cloud.

Échec de la suppression

Cette entrée est en cours de modification par d'autres collaborateurs.

<script setup lang="ts">
</script>

<template>
  <!-- Enregistrement réussi -->
  <LhAlert type="success" show-icon title="Enregistrement réussi">Le document a été synchronisé avec le cloud.</LhAlert>
  <!-- Échec de la suppression -->
  <LhAlert type="danger" show-icon title="Échec de la suppression">Cette entrée est en cours de modification par d'autres collaborateurs.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Enregistrement réussi -->
  <LhAlert type="success" show-icon title="Enregistrement réussi">Le document a été synchronisé avec le cloud.</LhAlert>
  <!-- Échec de la suppression -->
  <LhAlert type="danger" show-icon title="Échec de la suppression">Cette entrée est en cours de modification par d'autres collaborateurs.</LhAlert>
</template>

Fermeture

Fermeture

Cliquez sur le bouton à droite pour me fermer.

Texte personnalisé du bouton de fermeture.

<script setup lang="ts">
</script>

<template>
  <!-- Texte de fermeture par défaut -->
  <LhAlert closable>Cliquez sur le bouton à droite pour me fermer.</LhAlert>
  <!-- Texte de fermeture personnalisé -->
  <LhAlert closable close-label="Compris">Texte personnalisé du bouton de fermeture.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Texte de fermeture par défaut -->
  <LhAlert closable>Cliquez sur le bouton à droite pour me fermer.</LhAlert>
  <!-- Texte de fermeture personnalisé -->
  <LhAlert closable close-label="Compris">Texte personnalisé du bouton de fermeture.</LhAlert>
</template>

Style épuré

Style épuré

Style épuré avec fond clair et bordure.

Idéal sur un fond clair.

<script setup lang="ts">
</script>

<template>
  <!-- warning épuré -->
  <LhAlert type="warning" plain show-icon>Style épuré avec fond clair et bordure.</LhAlert>
  <!-- danger épuré -->
  <LhAlert type="danger" plain show-icon>Idéal sur un fond clair.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- warning épuré -->
  <LhAlert type="warning" plain show-icon>Style épuré avec fond clair et bordure.</LhAlert>
  <!-- danger épuré -->
  <LhAlert type="danger" plain show-icon>Idéal sur un fond clair.</LhAlert>
</template>

Alert API

Props

Propriété	Description	Type	Valeur par défaut
type	Sémantique du message	"info" | "success" | "warning" | "danger"	'info'
title	Titre (le slot title est également disponible)	string	—
closable	Possibilité de fermer l'alerte	boolean	false
showIcon	Afficher l'icône sémantique	boolean	false
plain	Style épuré (fond clair avec bordure)	boolean	false
closeLabel	Nom accessible du bouton de fermeture (en l'absence de valeur, utilise l'entrée alert.close du pack de langue)	string	—
sx	Propriétés de mise en page rapide sx	LhSxProps	—

Events

Événement	Description	Paramètres
close	Émis après un clic sur le bouton de fermeture	—

Slots

Slot	Description
title	Titre personnalisé
default	Contenu de la description

Accessibilité

• warning/danger → role="alert" (annonce immédiate) ; info/success → role="status" (annonce plus discrète)
• Le bouton de fermeture est un véritable <button> ; son aria-label provient du pack de langue alert.close, avec un anneau de focus visible via :focus-visible
• Le fond clair de la couleur sémantique est dérivé par color-mix() à partir de la couleur sémantique et suit automatiquement le thème et le mode clair/sombre

Définitions de types

Les structures de types TypeScript exportées par ce composant sont présentées ci-dessous (extraction automatique à partir des sources packages/components/alert/src/types.ts et @lh-ui/share/core/* ; cliquez sur chaque entrée pour afficher la définition complète ; la description des propriétés se trouve dans le tableau Props ci-dessus) :

LhAlertProps

export interface LhAlertProps {
  /** Sémantique du message */
  type?: LhAlertType
  /** Titre (le slot title est également disponible) */
  title?: string
  /** Possibilité de fermer l'alerte */
  closable?: boolean
  /** Afficher l'icône sémantique */
  showIcon?: boolean
  /** Style épuré */
  plain?: boolean
  /** Nom accessible du bouton de fermeture (en l'absence de valeur, utilise l'entrée alert.close du pack de langue) */
  closeLabel?: string
  /** Propriétés de mise en page rapide sx */
  sx?: LhSxProps
}

LhAlertType _{(provient de @lh-ui/share/core/alert)}

/** Sémantique de l'alerte */
export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'