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

Import

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

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	Squares the corners of the chip.
className	String	-	Overrides or extends the component's styles.
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
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 here
prependIcon	Object	-	Inserts a custom EIcon element to the chip that is located before the content. More Info 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.

Callback Functions

The EChip component contains following callback functions.

Function	Description
onClick	Component's onClick event.
onIconClick	OnClick on prependIcon or appendIcon.(e.g close icon)

Children

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

Children	Description
✔️	Component's content.