demo

web-components/stories/Button.js

@@ -0,0 +1,20 @@
+import { html } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import './button.css';
+
+/** Primary UI component for user interaction */
+export const Button = ({ primary, backgroundColor = null, size, label, onClick }) => {
+  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
+  return html`
+    <button
+      type="button"
+      class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
+      style=${styleMap({ backgroundColor })}
+      @click=${onClick}
+    >
+      ${label}
+    </button>
+  `;
+};