Alert

Use EAlert element to show important messages, like errors or warnings. It provides immediate feedback on user actions or system events, improving user experience Demo Here

Import

import EAlert from "@components/Elements/EAlert";

Usage

<EAlert>This is an alert component.</EAlert>

Props

For EAlert component, the following props are available:

Prop	Type	Default	Note
closeBtnAttrs	Object	-	binds attributes to the close EBtn element.
closable	Boolean	false	If set to true, it makes the element toggleable and adds a close button.
variant	String	"fill"	The EAlert element can be represented in two ways: fill, alternate, outline. alternate displays the btn with a light background, outline draws a border around an element.
size	String	"md"	The EAlert element has three predefined sizes: sm, md, lg.
open	Boolean	true	Alert Showing state.
square	Boolean	false	Removes rounded corners of the element.
color	String	"primary"	The given color is applied to the element - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars scsspage.
className	String	-	Overrides or extends the component's styles.
border	Boolean	false	Adds a border to the edge on the element.
borderPosition	String	"left"	The EAlert border can appear from the left, right, top or bottom edge of the element.
borderColor	String	-	The given color is applied to the border of the alert - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars scsspage.
prependIcon	Object	-	Inserts a custom EIcon element to the accordion item(s) that is located before the title. More Info here
appendIcon	Object	-	Inserts a custom EIcon element to the accordion item(s) that is located after the title. More Info here
animation	String	"component-pop-out"	The EAlert element can be animated in many ways. Defined animations here.

Callback Functions

The EAlert component contains following callback functions.

Function	Description
onCloseBtnClick	Callback fired when the close button is clicked . function(event: React.SyntheticEvent) => void 👇 • event: The event source of the callback.

Children

The EAlert component provides a children props that enable you to customize the content.

Children	Description
✔️	Component's content.