Alert
It displays short important message in such a way that it does not disturbs user's current task.
Usage
It can be directly used in your component. Example :
import React, { useState } from "react";
import { Alert } from "sai-ui";
const ExampleCode = () => {
const [shouldOpenAlert, setShouldOpenAlert] = useState(false);
const openAlert = () => {
setShouldOpenAlert(true);
};
const closeAlert = () => {
setShouldOpenAlert(false);
};
return (
<div className="">
<div className="border py-7 w-full flex items-center justify-center mt-3">
<button
className="text-center text-[white] bg-[#0072E5] p-2"
onClick={openAlert}
>
Open Alert
</button>
</div>
<Alert
open={shouldOpenAlert}
closeAlert={closeAlert}
duration={2000}
type="error"
>
It is a simple Alert !
</Alert>
</div>
);
};
export default ExampleCode;
Variants
Alert component has 4 variants : "success", "error", "warning", "info"
import React, { useState, useEffect } from "react";
import { Alert } from "sai-ui";
const ExampleCode = () => {
const [shouldOpenAlert, setShouldOpenAlert] = useState(false);
const [alertType, setAlertType] = useState("");
const openAlert = () => {
setShouldOpenAlert(true);
};
const closeAlert = () => {
setShouldOpenAlert(false);
};
const getAlertText = () => {
if (alertType === "error") return "It is a error alert";
if (alertType === "success") return "It is a success alert";
if (alertType === "info") return "It is a info alert";
if (alertType === "warning") return "It is a warning alert";
return "";
};
useEffect(() => {
if (alertType !== "") {
openAlert();
}
}, [alertType]);
return (
<div className="">
<div className="border py-7 w-full flex items-center justify-center mt-3 gap-4">
<button
className="text-center text-[white] bg-[#0072E5] p-2"
onClick={() => {
setAlertType("error");
}}
>
Error
</button>
<button
className="text-center text-[white] bg-[#0072E5] p-2"
onClick={() => {
setAlertType("success");
}}
>
Success
</button>{" "}
<button
className="text-center text-[white] bg-[#0072E5] p-2"
onClick={() => {
setAlertType("info");
}}
>
Info
</button>{" "}
<button
className="text-center text-[white] bg-[#0072E5] p-2"
onClick={() => {
setAlertType("warning");
}}
>
Warning
</button>
</div>
<Alert
open={shouldOpenAlert}
closeAlert={closeAlert}
duration={2000}
type={alertType}
>
{getAlertText()}
</Alert>
</div>
);
};
export default ExampleCode;
Props
Props for Alert components are:
| Name | Type | Description |
|---|
| open | Boolean | To control visibility of the Alert |
| closeAlert | function | A function which closes the alert component. It is madatory to be passed. |
| type | String | It specifies the typpe of the alert to be rendered. It has four options: "success", "error", "info", "warning" |
| duration | number | It specifies the duration of time after which alert will disappear. By default its value is taken as 2000ms i.e, 2 seconds |
| customStyles | Object | They are used for styling the component they will override the current styles |
| iconStyles | Object | It is used for styling the icon of the alert. |
| customIcon | Element | It is used for passing your custom icon in the alert. It will replace the default icon. |
