Badge

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

Usage

<template>
  <EBadge>
    <template #element>
      <EAvatar src="image_source"/>
    </template>
    <template #content>+999</template>
  </EBadge>
</template>

Props

For EBadge component, the following props are available:

Prop	Type	Default	Note
rounded	Boolean	false	It creates a circular badge.
width	String	-	Sets the badge element's width.
badgeWidth	String	-	Sets the badge content's width.
height	String	-	Sets the badge element's height.
badgeHeight	String	-	Sets the badge content's height.
borderWidth	String	_	Sets the badge border's width.
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	-	Specifies the top position of an element in combination with the position property.
left	String	-	Specifies the left position of an element in combination with the position property.
right	String	-	Specifies the right position of an element in combination with the position property.
bottom	String	-	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

Slots

The EBadge component provides following slots that enable you to customize the content.

Slot	Description
element	The slot used for the badge's element.
content	The slot used for the badge's content.