resuable button

qortal-ui-core/src/functional-components/my-button.js

@@ -0,0 +1,48 @@
+import { LitElement, html, css } from 'lit';
+import '@vaadin/button';
+import '@polymer/paper-spinner/paper-spinner-lite.js';
+
+export class MyButton extends LitElement {
+	static properties = {
+		onClick: { type: Function },
+		isLoading: { type: Boolean },
+		label: { type: String },
+	};
+
+	static styles = css`
+		vaadin-button {
+			height: 100%;
+			margin: 0;
+			cursor: pointer;
+
+			min-width: 80px;
+			background-color: #03a9f4;
+			color: white;
+		}
+
+		vaadin-button:hover {
+			opacity: 0.8;
+		}
+	`;
+
+	constructor() {
+		super();
+		this.onClick = () => {};
+		this.isLoading = false;
+		this.label = '';
+	}
+
+	render() {
+		return html`
+			<vaadin-button
+				?disabled="${this.isLoading}"
+				@click="${this.onClick}"
+			>
+				${this.isLoading === false
+					? html`${this.label}`
+					: html`<paper-spinner-lite active></paper-spinner-lite>`}
+			</vaadin-button>
+		`;
+	}
+}
+customElements.define('my-button', MyButton);