Alert

Alerts display brief messages for the user without interrupting their use of the app

Introduction

Alerts give users brief and potentially time-sensitive information in an unobtrusive manner.

Default Alert

Here is a gentle confirmation that your action was successful.

<Alert 
variant="solid"
color="success"
position="center" 
message="Here is a gentle confirmation that your action was successful."
icon={<IoMdDoneAll/>}
/>

Different variety via colors

This is an solid error Alert.

This is an solid info Alert.

This is an solid warning Alert.

 <Alert 
variant="solid"
color="error"
position="bottomCenter" 
message="This is an solid error Alert." 
icon={<MdError/>} 
/> 
<Alert 
variant="solid"
color="error"
position="topCenter" 
message="This is an solid error Alert."
icon={<MdError/>}
/> 
<Alert 
variant="solid"
color="info"
position="bottomRight" 
message="This is an solid info Alert." 
icon={<MdInfo/>}   
/>
<Alert 
variant="solid"
color="warning"
position="center" 
message="This is an solid warning Alert." 
icon={<MdWarning/>} 
/>

API References

Prop	Type	Description	Default
variant	`"solid" \| "outline" \|	Border and Background of Alert	solid
color	`"success\|"error"\|"warning"\|"error"`	Color of Background	success
title	`String Optional`	Title of the Avatar	""
message	`String`	Message for your Alert	success
duration	`Number Optional`	Automatically Hide after given time	""
onClose	`Function Optional`	Operation you can perform	console.log
icon	`react icons Optional`	Icons in success,error Alert	React icons
position	` "topLeft", "topCenter","topRight",	Positon for ur screenn	center
	"topRight", "centerLeft", "centerLeft",
	"centerRight","bottomCenter","bottomLeft",
	"bottomCenter", "bottomRight",`

Alert with outline and Title

Outline

This is an Outline error Alert.

This is an Outline info Alert.

This is an Outline warning Alert.

 <Alert 
variant="outline"
color="error"
position="topRight" 
message="This is an Outline error Alert." 
icon={<MdError/>} 
/> 
<Alert 
variant="outline"
color="error"
position="bottomLeft" 
message="This is an Outline error Alert."
icon={<MdError/>}
/> 
<Alert 
variant="outline"
color="info"
position="bottomRight" 
message="This is an Outline info Alert." 
icon={<MdInfo/>}   
/>
<Alert 
variant="outline"
color="warning"
position="center" 
message="This is an Outline warning Alert." 
icon={<MdWarning/>} 
/>

Title

This is an Outline error Alert.

This is an Outline info Alert.

This is an Outline warning Alert.

<Alert 
variant="outline"
color="error" 
title="Error"
position="bottomLeft" 
message="This is an Outline error Alert."
icon={<MdError/>}
/> 
<Alert 
variant="outline"
color="info"  
title="Information"
position="centerRight" 
message="This is an Outline info Alert." 
icon={<MdInfo/>}   
/>
<Alert 
variant="outline"
color="warning" 
title="Warning"
position="centerLeft" 
message="This is an Outline warning Alert." 
icon={<MdWarning/>} 
/>

Avatar Alert Dialog