wiki-Alert

Ver en Git

---

Alert

El Alert se utiliza para mostrar un cartel con la intención de mostrar información, un aviso, un error, o una acción exitosa.

Referencia de la API

Propiedad	Tipo	Descripción
message	string	(Opcional) Define un título para la alerta.
children	ReactNode	El contenido de la alerta.
type	'info' | 'error' | 'warning' | 'success'	(Opcional) Tipo de alerta. Cambia el aspecto visual (y el ícono en caso de mostrarlo).
closable	boolean	(Opcional) Permite cerrar la alerta. Si es true, se añade un ícono para cerrarla.
withIcon	boolean	(Opcional) Muestra el ícono asociado con el tipo de alerta.
iconProps	IconProps	Propiedades adicionales que se pasan al ícono (si se utiliza).
className	string	(Opcional) Clase adicional para aplicar estilos personalizados.
style	CSSProperties	(Opcional) Estilo en línea para el componente.
onClose	() => void	(Opcional) Función que se llama cuando la alerta es cerrada.

typeInterface

Define los tipos visuales de alerta disponibles, los cuales se usan para determinar los colores y el ícono que se muestra.

Tipo	Descripción
info	Alerta informativa.
error	Alerta de error (con ícono de error).
warning	Alerta de advertencia.
success	Alerta de éxito (con ícono de éxito).

Ejemplo de Uso

import { Alert } from '@auravant/ui-kit';

<Alert 
 type="error" 
 message="Ocurrió un error al cargar los datos" 
 closable={true} 
 onClose={() => console.log('Alerta cerrada')}>
 Detalles del error: No se pudo conectar a la base de datos.
</Alert>