Alerta

Muestra información de aviso importante dentro de la página.

Uso básico

Uso básico

Información

Este es un mensaje informativo.

Éxito

Este es un mensaje de éxito.

Advertencia

Este es un mensaje de advertencia (estilo simple).

Este es un mensaje de peligro (sin título).

Con estado externo

El cierre es internamente no controlado: al pulsar el botón de cierre se desmonta. Envuélvelo en un renderizado condicional si necesitas que se pueda volver a abrir.

import { LhAlert } from '@lh-ui/react'

export default function Demo() {
  return (
    <LhAlert type="success" title="Aviso de éxito" showIcon closable>
      Esto es un aviso de éxito.
    </LhAlert>
  )
}

Alert Props

Prop	Descripción	Tipo	Valores permitidos	Predeterminado
type	Tipo	'info' | 'success' | 'warning' | 'danger'	—	'info'
title	Título (si no se pasa, no se renderiza la fila de título)	ReactNode	—	—
closable	Se puede cerrar	boolean	—	false
showIcon	Muestra el icono del tipo	boolean	—	false
plain	Estilo plano (borde claro)	boolean	—	false
closeLabel	Nombre accesible del botón de cierre (si no se pasa, toma del paquete de idioma alert.close)	string	—	'关闭警告'
sx	Props rápidas de layout	SxProps	—	—

Eventos de Alert

Evento	Descripción	Firma del callback	Equivalente en Vue
onClose	Se dispara al hacer clic en el botón de cierre	(event: MouseEvent) => void	@close

Cierre interno no controlado

Tras hacer clic en el botón de cierre, Alert se desmonta directamente (sin animación de transición) y dispara onClose. Si necesitas «cerrar y volver a abrir», envuelve el componente con un renderizado condicional controlado por estado externo; no dependas del estado interno del componente.

Región live de accesibilidad

Cuando type es warning / danger se emite role="alert" (anuncio inmediato); con info / success se emite role="status" (anuncio en cola), para no interrumpir la operación en curso del usuario.

Estilos

import '@lh-ui/react/style/alert'