Change button atom to complate

components/01-atoms/form/button/button.html

@@ -1,15 +1,17 @@
+import Button from "./components/01-atoms/form/button/index.jsx";
+
 <div>
     <div class="demo">
-        <button class="btn btn--small">Small Button (TBD)</button>
-        <button class="btn btn--medium">Medium Button</button>
-        <button class="btn btn--large">Large Button (TBD)</button>
-        <button class="btn btn--light">Light Button</button>
-        <button class="btn btn--cta" data-label="Call To Action Button" >Call To Action Button</button>
+        <Button variant="small">Small Button</Button>
+        <Button variant="medium">Medium Button</Button>
+        <Button variant="large">Large Button</Button>
+        <Button variant="light">Large Button</Button>
+        <Button variant="cta">Call To Action Button</Button>
     </div>
     <div class="demo demo--inverted">
-        <button class="btn btn--small btn--inverted">Small Button (TBD)</button>
-        <button class="btn btn--medium btn--inverted">Medium Button</button>
-        <button class="btn btn--large btn--inverted">Large Button (TBD)</button>
-        <button class="btn btn--light btn--inverted">Light Button</button>
+        <Button variant="small" inverted>Small Button inverted</Button>
+        <Button variant="medium" inverted>Medium Button inverted</Button>
+        <Button variant="large" inverted>Large Button inverted</Button>
+        <Button variant="light" inverted>Large Button inverted</Button>
     </div>
 </div>

components/01-atoms/form/button/index.jsx

@@ -0,0 +1,13 @@
+import { createElement } from 'complate-stream'
+
+export default function Button ({ variant, inverted }, ...children) {
+  let buttonClass = `btn btn--${variant}`
+  if (inverted) {
+    buttonClass += ' btn--inverted'
+  }
+  let label
+  if (variant === 'cta') {
+    label = children.join('')
+  }
+  return <button class={buttonClass} data-label={label}>{children}</button>
+}