LifeUI
1.53.2
Inicio

Alert

Las alertas muestran mensajes importantes cerca de elementos clave para informar sobre errores o situaciones que requieren atención.

Información
Esta es una alerta informativa básica con título y descripción.

Variante Informacion

Nueva Funcionalidad Disponible
Hemos lanzado una nueva característica que te permitirá personalizar tu experiencia.Leer más

Variante Exito

Cambios Guardados
Tu perfil ha sido actualizado exitosamente. Los cambios se reflejarán en los próximos minutos.

Variante Advertencia

Acción Requerida
Tu sesión expirará en 5 minutos. Por favor, guarda tu trabajo y vuelve a iniciar sesión.

Variante Error

Error de Conexión
No se pudo conectar con el servidor. Verifica tu conexión a internet e intenta nuevamente.

Sin indicador (borde de acento)

Envia la propiedad indicator en false para no renderizar el indicador

Backup Completado
El respaldo automático se completó exitosamente a las 3:00 AM.

Icono personalizado

Renderiza un ícono, avatar u otro elemento visual al inicio de la alerta

Llamada entrante de Karina
Tienes 2 mensajes de voz en tu buzon

Ejemplos

Alertas de formulario

Alertas de Notificacion

Notificaciones

Nuevo mensaje de Juan Pérez
Hace 2 min
Recordatorio: Reunión en 15 minutos
Hace 5 min
Nueva actualización disponible
Hace 10 min

Props

Alert

PropTipoRequeridoDescripción
statusinformation | warning | success | error-Tipo de alerta que determina el estilo y comportamiento
indicatorboolean-Indica si el borde decorativo debe renderizarse o no
iconReactNode-Renderiza un elemento como icono
{...props}React.ComponentProps<"div">-Todas las props estandar de un div

AlertTitle

PropTipoRequeridoDescripción
childrenReactNode✅Título de la alerta
classNamestring-Clases CSS adicionales

AlertDescription

PropTipoRequeridoDescripción
childrenReactNode✅Descripción o contenido principal de la alerta
classNamestring-Clases CSS adicionales
Action bar
Se utiliza para mostrar una barra de acción inferior con un conjunto de acciones.
Alert dialog