<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;