Alert

The alert component is used to give feedback to the user based on some action. These alerts can also act as response handler for some specific activity

Usage

The Alert component has five display type which can be mentioned using the type prop. By default the alert has default as its value. The alert component also has a label prop which is used to render the main text of the response

• default
• success
• info
• warning
• danger

Example

This is a sample alert

This is a sample alert

This is a sample alert

This is a sample alert

This is a sample alert

Code

<Alert type="default" label="This is a sample alert" />

<Alert type="success" label="This is a sample alert" />

<Alert type="info" label="This is a sample alert" />

<Alert type="warning" label="This is a sample alert" />

<Alert type="danger" label="This is a sample alert" />

Title

Alert component also has a optional title prop which renders a title for the alert

Response Title

This is the label of this sample alert

<Alert

type="success"

title="Response Title"

label="This is the label of this sample alert"

/>

Close Icon

Alert component also has a onClose prop which is triggered when the close icon is clicked. This is can be used if this alert component is used as a toaster to show toast message and then, if you want to hide it you can use this prop.

Click the close icon

<Alert

type="warning"

label="Click the close icon"

onClose={() => alert("close is clicked")}

/>

Loading

The alert component has a loading prop which shows a loading icon. This also acts as a loading indicator to the user, indicating that the requested activity is in progress.

In Progress

Your request is in progress

<Alert

type="info"

title="In Progress"

label="Please wait, the request you made is taking some time..."

showLoading={true}

/>

API

Prop	Type	Possible values	Default Value
type	string	"default", "success", "info", "danger" and "warning"	default
label	string	Any string	-
title	string	Any string	""
showLoading	boolean	true & false	false
onClose	() => void	-	-

To check on when to use which check Badge component documentation

Built by Akshay 🤙