<jsd-button>

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

Installation

npm install @jsdesign/jsd-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 | boolean | -- | Disabled buttons cannot be interacted with and have no visual interaction effect. Allowed values: attribute is present, false. | icon | boolean | -- | When attribute is present, icon will be displayed before label. | trailing-icon | boolean | -- | When attribute is present, 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 | boolean | -- | Makes the button take full available space. Allowed values: attribute is present, false.

Examples

Primary Button

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

Secondary Button

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

Tertiary Button

<jsd-button btn-style='tertiary' label='Tertiary'></jsd-button>

Icon Button

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

<jsd-button trailing-icon label='Icon Button'>
    <span slot='trailingIcon'>&hearts;</span>
</jsd-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

<jsd-button id="custom-button" btn-style='primary' theme='dark' label='CUSTOM BUTTON'>
</jsd-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;