Chip

EChip is a UI element that allows users to make choices, filter material, or start activities while presenting complicated information in a compact style. They offer a variety of design options and can be clicked or removed. * Demo Here*

Usage

<EChip>Im a Chip</EChip>

Props

For EChip component, the following props are available:

Prop	Type	Default	Note
pill	Boolean	false	It creates a circular chip.
square	Boolean	false	Removes rounded corners of the element.
width	String	-	Sets the component's width.
height	String	-	Sets the component's height.
size	String	"md"	The EChip element has three predefined sizes: sm, md, lg.
iconChip	Object	-	By using iconChip prop the EChip element will be visualized in an Icon form. More Info about icons here.
appendIcon	Object	-	Inserts a custom EIcon element to the chip that is located after the content. More Info about icons here.
prependIcon	Object	-	Inserts a custom EIcon element to the chip that is located before the content. More Info about icons here.
color	String	"primary"	The given color is applied to the chip - 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 EChip element can be represented in four ways: fill, alternate, outline and gradient. alternate displays the chip with a light background. outline draws a border around an element and gradient displays smooth transitions between light and dark shades of specified color.

Emits

The EChip component contains following emits.

Emit	Description
onIconClick	Emits an event on click on prependIcon or appendIcon.(e.g remove icon)

Slots

The EChip component provides a default slot that enable you to customize the content.

Slot	Description
default	The default Vue slot.