Alert
Muestra un mensaje de llamada de atención (callout) de forma componible.
Default (Información)
Información del sistema
Una nueva actualización de las políticas de privacidad está disponible.
<Alert>
<AlertIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
</AlertIcon>
<AlertContent>
<AlertTitle>Información del sistema</AlertTitle>
<AlertDescription>Una nueva actualización de las políticas de privacidad está disponible.</AlertDescription>
</AlertContent>
</Alert>Error (Destructivo)
Error de conexión
No se pudo guardar tu configuración. Por favor, inténtalo de nuevo.
<Alert variant="error">
<AlertIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
</AlertIcon>
<AlertContent>
<AlertTitle>Error de conexión</AlertTitle>
<AlertDescription>No se pudo guardar tu configuración. Por favor, inténtalo de nuevo.</AlertDescription>
</AlertContent>
</Alert>Success (Éxito)
¡Operación exitosa!
Tus cambios han sido guardados correctamente en la base de datos.
<Alert variant="success">
<AlertIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</AlertIcon>
<AlertContent>
<AlertTitle>¡Operación exitosa!</AlertTitle>
<AlertDescription>Tus cambios han sido guardados correctamente en la base de datos.</AlertDescription>
</AlertContent>
</Alert>Propiedad: Dismissible (Cerrable)
Notificación temporal
Puedes cerrar este mensaje haciendo clic en la 'X' de la derecha.
<Alert variant="default">
<AlertIcon>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
</AlertIcon>
<AlertContent>
<AlertTitle>Notificación temporal</AlertTitle>
<AlertDescription>Puedes cerrar este mensaje haciendo clic en la 'X' de la derecha.</AlertDescription>
</AlertContent>
<AlertCloseButton />
</Alert>