eve-button

An Evergreen Button Web Component

Demo

$3

``bash
npm i @evergreen-wc/eve-button
`

$3

`js
import { html, LitElement } from 'lit';
import '@evergreen-wc/eve-button';

class MyComponent extends LitElement {
handleClick() {
alert('button clicked!');
}

render() {

const style =
:host .btn {
color: white;
background-color: red;
}
:host .btn:hover {
color: red;
background-color: white;
};

return html
Medium href Button
Medium function Button
;
}
}
`

$3

| Property | Description |
| -------- | ----------- |
| size | Set size of button. e.g. xs, sm, md, lg |
| href | Set an anchor to navigate to on click |
| onClick | Set a function to callback on click |
| style | Set a custom stylesheet for a specific button |

$3

`css
--primary-color: #007f1d;
--secondary-color:#fff;
--btn-background: transparent;
--btn-border-color: var(--primary-color);
--btn-text-color: var(--primary-color);
--btn-hover-background-color: var(--primary-color);
--btn-hover-text-color: var(--secondary-color);
--btn-hover-border-color: var(--primary-color);
--btn-border-radius: 5px
``