Alerta

Barra de aviso semántico y estática. Cuatro tipos, icono, estilo plano y cierre opcional.

Alerta

<template>
  <div class="demo-col" style="max-width: 520px; gap: 12px">
    <LhAlert type="info" title="Aviso de la colección" show-icon>La versión digital de alta definición de Viaje por las montañas y los arroyos ya está disponible; te invitamos a contemplarla.</LhAlert>
    <LhAlert type="success" title="Adquisición completada" show-icon closable>Ya está archivada la adquisición de 120 pinturas de la dinastía Song en alta definición.</LhAlert>
    <LhAlert type="warning" title="Desviación de color" show-icon plain closable>3 valores de color se desvían de la referencia; sugerimos revisarlos.</LhAlert>
    <LhAlert type="danger" :title="titleText" closable :close-label="closeLabel">
      Sin icono, con nombre accesible personalizado para el botón de cierre.
    </LhAlert>
    <LhAlert type="info" plain>Estilo plano (plain) de solo texto, sin título.</LhAlert>
  </div>
</template>

<script>
export default {
  data: () => ({
    titleText: 'Corrección rechazada',
    closeLabel: 'Cerrar este aviso',
  }),
}
</script>

Props

Prop	Descripción	Tipo	Predeterminado
type	Tipo semántico	'info' \| 'success' \| 'warning' \| 'danger'	'info'
title	Título (también admite el slot title)	string	—
closable	Si se puede cerrar	boolean	false
showIcon	Si se muestra el icono semántico	boolean	false
plain	Si se aplica el estilo plano (plain) de color claro	boolean	false
closeLabel	Nombre accesible del botón de cierre (si no se pasa, toma alert.close del paquete de idioma)	string	—
sx	Propiedades de layout abreviadas	—	—

Slots

Slot	Descripción
title	Área del título (por defecto usa el prop title)
default	Descripción del cuerpo