1.0.0 • Published 4 years ago
@jsdesign/jsd-jsd-button v1.0.0
<jsd-button>
Simple button web-component to be use accross web irrespective of frameworks
Installation
npm install @jsdesign/jsd-buttonAttributes
| 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
<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 tertiary label='Tertiary'></jsd-button>Icon Button
<jsd-button icon='true' label='Icon Button'>
<span slot='icon'>♥</span>
</jsd-button>
<jsd-button trailing-icon='true' label='Icon Button'>
<span slot='trailingIcon'>♥</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; |
1.0.0
4 years ago