@zestui/button

<zest-button>

Simple button web-component to be use accross web irrespective of frameworks

Installation

npm install @zestui/button

Attributes

Name	Type	Default	Description
label	string	''	Label to display for the button, and aria-label.
btn-style	string	'primary'	Set the button style. Allowed values: 'primary', 'secondary', 'tertiary'.
disabled	string	'false'	Disabled buttons cannot be interacted with and have no visual interaction effect. Allowed values: 'true', 'false'.
icon	string	'false'	When 'true', icon will be displayed before label.
trailing-icon	string	'false'	When 'true', icon will be displayed after label.
theme	string	light	The button will adapt to dark theme. Allowed values: 'dark', 'light'.
type	string	'button'	Set the button type. Allowed values: 'button', 'submit', 'reset'.
full-width	string	'false'	Makes the button take full available space. Allowed values: 'true', 'false'.

Examples

Primary Button

<zest-button label='Testing'></zest-button>
<zest-button btn-style='primary' label='Testing'></zest-button>

Secondary Button

<zest-button btn-style='secondary' label='Secondary'></zest-button>

Tertiary Button

<zest-button tertiary label='Tertiary'></zest-button>

Icon Button

<zest-button icon='true' label='Icon Button'>
    <span slot='icon'>&hearts;</span>
</zest-button>

<zest-button trailing-icon='true' label='Icon Button'>
    <span slot='trailingIcon'>&hearts;</span>
</zest-button>

We can pass any custom icon html in the slot elements. Also u are allowed to create css icons and can style it your way.

Cutomization

<zest-button id="custom-button" btn-style='primary' theme='dark' label='CUSTOM BUTTON'>
</zest-button>

#custom-button {
    --color-primary: #e9437a;
    --border-radius: 30px;
}

Cutomizable property list

Name	Default
--color-btn-style='primary'	#1eba68;
--color-primary-dark	#1ba75e;
--color-btn-style='secondary'	#f6f6f6;
--color-secondary-dark	#efefef;
--color-secondary-darktheme	rgba(255, 255, 255, 0.3);
--color-secondary-dark-darktheme	rgba(255, 255, 255, 0.6);
--color-error	#dd4421;
--color-error-background	#ffebe6;
--color-placeholder	#737373;
--color-placeholder-disabled	#e0e0e0;
--color-placeholder-darktheme	#e0e0e0;
--color-label	#909090;
--color-black	#2c2c2c;
--color-header-black	#252525;
--color-header-tag	#747373;
--color-white	#ffffff;
--color-border	#edebeb;
--border-radius	0.5rem;
--border-width	1px;
--border-width-hover	3px;
--label-spacing	0.2rem;
--label-case	uppercase;
--label-font-size	0.8rem;
--button-font-weight	500;