Alerta

Aviso estático de página (no es imperativo, a diferencia de Message). La semántica se vincula con el rol de la región en vivo: warning/danger usan role="alert" para anunciar de inmediato; info/success usan role="status" para un anuncio discreto.

Uso básico

Cuatro semánticas

Un aviso neutro.

La operación se ha completado correctamente.

El espacio en disco está a punto de agotarse.

Se ha interrumpido la conexión de red.

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

<template>
  <!-- Aviso neutro -->
  <LhAlert>Un aviso neutro.</LhAlert>
  <!-- success -->
  <LhAlert type="success">La operación se ha completado correctamente.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">El espacio en disco está a punto de agotarse.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">Se ha interrumpido la conexión de red.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Aviso neutro -->
  <LhAlert>Un aviso neutro.</LhAlert>
  <!-- success -->
  <LhAlert type="success">La operación se ha completado correctamente.</LhAlert>
  <!-- warning -->
  <LhAlert type="warning">El espacio en disco está a punto de agotarse.</LhAlert>
  <!-- danger -->
  <LhAlert type="danger">Se ha interrumpido la conexión de red.</LhAlert>
</template>

Con icono y título

Icono y título

Guardado correctamente

El documento se ha sincronizado con la nube.

Error al eliminar

Otro colaborador está editando esta entrada.

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

<template>
  <!-- Guardado correctamente -->
  <LhAlert type="success" show-icon title="Guardado correctamente">El documento se ha sincronizado con la nube.</LhAlert>
  <!-- Error al eliminar -->
  <LhAlert type="danger" show-icon title="Error al eliminar">Otro colaborador está editando esta entrada.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Guardado correctamente -->
  <LhAlert type="success" show-icon title="Guardado correctamente">El documento se ha sincronizado con la nube.</LhAlert>
  <!-- Error al eliminar -->
  <LhAlert type="danger" show-icon title="Error al eliminar">Otro colaborador está editando esta entrada.</LhAlert>
</template>

Cerrable

Cerrable

Haz clic en el botón de la derecha para cerrarme.

Texto personalizado del botón de cierre.

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

<template>
  <!-- Texto de cierre predeterminado -->
  <LhAlert closable>Haz clic en el botón de la derecha para cerrarme.</LhAlert>
  <!-- Texto de cierre personalizado -->
  <LhAlert closable close-label="Entendido">Texto personalizado del botón de cierre.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- Texto de cierre predeterminado -->
  <LhAlert closable>Haz clic en el botón de la derecha para cerrarme.</LhAlert>
  <!-- Texto de cierre personalizado -->
  <LhAlert closable close-label="Entendido">Texto personalizado del botón de cierre.</LhAlert>
</template>

Estilo plano

Estilo plano

Estilo plano con fondo claro y borde.

Ideal para fondos claros.

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

<template>
  <!-- warning plano -->
  <LhAlert type="warning" plain show-icon>Estilo plano con fondo claro y borde.</LhAlert>
  <!-- danger plano -->
  <LhAlert type="danger" plain show-icon>Ideal para fondos claros.</LhAlert>
</template>

<script>
export default {}
</script>

<template>
  <!-- warning plano -->
  <LhAlert type="warning" plain show-icon>Estilo plano con fondo claro y borde.</LhAlert>
  <!-- danger plano -->
  <LhAlert type="danger" plain show-icon>Ideal para fondos claros.</LhAlert>
</template>

Alert API

Props

Prop	Descripción	Tipo	Predeterminado
type	Tipo semántico	"info" | "success" | "warning" | "danger"	'info'
title	Título (también puede usarse el slot title)	string	—
closable	Si se puede cerrar	boolean	false
showIcon	Si se muestra el icono semántico	boolean	false
plain	Estilo plano (fondo blanco con borde)	boolean	false
closeLabel	Nombre accesible del botón de cierre (si no se pasa, se toma del paquete de idioma alert.close)	string	—
sx	Props de disposición rápida	LhSxProps	—

Events

Evento	Descripción	Parámetros
close	Se dispara tras hacer clic en el botón de cierre	—

Slots

Slot	Descripción
title	Título personalizado
default	Contenido descriptivo

Accesibilidad

• warning/danger → role="alert" (anuncio inmediato); info/success → role="status" (anuncio discreto)
• El botón de cierre es un <button> real; su aria-label proviene del paquete de idioma alert.close, con anillo de foco :focus-visible
• El fondo claro del color semántico se deriva con color-mix() a partir del color semántico y sigue automáticamente el tema y el modo claro/oscuro

Definiciones de tipos

Las estructuras de tipos TypeScript exportadas por este componente (extraídas automáticamente de packages/components/alert/src/types.ts y de las fuentes @lh-ui/share/core/*; abre cada entrada para ver la definición completa; la descripción de los atributos está en la tabla de Props de arriba):

LhAlertProps

export interface LhAlertProps {
  /** Tipo semántico */
  type?: LhAlertType
  /** Título (también puede usarse el slot title) */
  title?: string
  /** Si se puede cerrar */
  closable?: boolean
  /** Si se muestra el icono semántico */
  showIcon?: boolean
  /** Si se usa el estilo plano */
  plain?: boolean
  /** Nombre accesible del botón de cierre (si no se pasa, se toma del paquete de idioma alert.close) */
  closeLabel?: string
  /** Props de disposición rápida */
  sx?: LhSxProps
}

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

/** Tipo semántico del aviso */
export type LhAlertType = 'info' | 'success' | 'warning' | 'danger'