Badge

EBadge are used to enhance the content with further information and add emphasis to an item's status for quick recognition. Demo Here

Import

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

Usage

const BadgeExample = () => {
    return (
        <EBadge content="+99">
            <EAvatar src="image_source"/>
        </EBadge>
    );
};

export default BadgeExample;

Props

For EBadge component, the following props are available:

Prop	Type	Default	Note
content	String	-	The badge's content.
rounded	Boolean	false	It creates a circular badge.
width	[String, Number]	-	Sets the badge element's width. Default unit is px.
badgeWidth	[String, Number]	-	Sets the badge content's width.
height	[String, Number]	-	Sets the badge element's height. Default unit is px.
badgeHeight	[String, Number]	-	Sets the badge content's height.
borderWidth	[String, Number]	-	Sets the badge's borders width.
className	String	-	Overrides or extends the component's wrapper styles.
badgeClasses	String	""	Overrides or extends the badge styles.
square	Boolean	false	Removes rounded corners of the element.
size	String	"md"	The EBadge element has three predefined sizes: sm, md, lg.
top	[String, Number]	-	Specifies the top position of an element in combination with the position property.
left	[String, Number]	-	Specifies the left position of an element in combination with the position property.
right	[String, Number]	-	Specifies the right position of an element in combination with the position property.
bottom	[String, Number]	-	Specifies the bottom position of an element in combination with the position property.
status	Boolean	false	Displays a badge without any content used for showing profile status (e.g offline,online, etc.)
color	String	"primary"	The given color is applied to the badge - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
variant	String	"fill"	The EBadge element can be represented in two ways: default, shadow and border. shadow displays the badge with a light shadow. border applies a 1.5px border around the badge.
position	String	top-right	The position prop allows the badge to be position relative to the activator. The badge can appear from the top-right, bottom-right,top-left or bottom-left edge of the element.
icon	Object	-	Inserts a custom EIcon element to the badge content. More Info here.

Children

The EBadge component provides a children props that enable you to indicate a badge on a certain element.

Children	Description
✔️	Display badge's element.