Button

EBtn comes in a range of colors and designs and enables users to trigger an activity with just one press. Demo Here

Import

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

Usage

<EBtn>Im a Button</EBtn>

Props

For EBtn component, the following props are available:

Prop	Type	Default	Note
disabled	Boolean	false	Disables the btn.
type	String	"button"	Html type attribute.
loading	Boolean	false	Displays progress bar.
active	Boolean	false	Creates an active button.
rounded	Boolean	false	It creates a circular btn.
square	Boolean	false	Removes rounded corners of the element.
width	[String, Number]	-	Sets the component's width. Default unit is px.
height	[String, Number]	-	Sets the component's height. Default unit is px.
href	String	-	This attribute creates a linked btn.
to	String	-	This attribute creates a linked btn.
target	String	"_self"	It specifies where to open the linked document. _self opens the linked document in the same frame as it was clicked.
className	String	-	Overrides or extends the component's styles.
size	String	"md"	The EBtn element has three predefined sizes: sm, md, lg.
block	Boolean	false	The EBtn element expands to take up all of the available space.
customColor	String	-	A custom color in rgb format is applied to the btn (e.g, customColor="101, 89, 204").
spinner	String	"beat"	Specify Spinner element. @values: beat, clip, moon, bounce .
color	String	"primary"	The given color is applied to the btn - utility colors are supported (e.g primary or danger). you'll find a list of built-in classes on the src/styles/_vars.scsspage.
iconBtn	Object	-	By using iconBtn prop the EBtn element will be visualized in an Icon form. More Info about icons here.
appendIcon	Object	-	Inserts a custom EIcon element to the btn that is located after the content. More Info here.
prependIcon	Object	-	Inserts a custom EIcon element to the btn that is located before the content. More Info here.
variant	String	"fill"	The EBtn element can be represented in two ways: fill, alternate, outline ,text. alternate displays the btn with a light background, outline draws a border around an element and text displays the btn with only text and no background color.

Callback Functions

The EBtn component contains following callback functions.

Function	Description
onClick	Component's onClick event.
onSubmit	Component's onSubmit event.

Children

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

Children	Description
✔️	Component's content.