✨ Implement buttons

src/components/Button/Readme.md

@@ -0,0 +1,26 @@
+A clickable button that should trigger an action on click.
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <p>
+        <Button onClick={event => console.debug(event)}>
+            Click here
+        </Button>
+    </p>
+    <p>
+        <Color builtin="blue">
+            <Button onClick={event => console.debug(event)}>
+                such blue wow
+            </Button>
+        </Color>
+    </p>
+    <p>
+        <Button disabled={true}>
+            Disabled
+        </Button>
+    </p>
+</Bluelib>
+```

src/components/Button/index.js

@@ -0,0 +1,12 @@
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import classNames from "classnames"
+
+
+export default function Button({children, className, disabled, ...props}) {
+    return (
+        <button className={useBluelibClassNames(classNames("button", disabled ? "status-disabled" : "status-clickable"), className)} {...props}>
+            {children}
+        </button>
+    )
+}

src/components/ButtonToggle/Readme.md

@@ -0,0 +1,38 @@
+A clickable button that should trigger an action on click.
+
+```jsx
+import Bluelib from "../Bluelib";
+import Color from "../Color";
+
+<Bluelib>
+    <p>
+        <ButtonToggle value={true}>
+            On
+        </ButtonToggle>
+        &nbsp;
+        <ButtonToggle value={false}>
+            Off
+        </ButtonToggle>
+    </p>
+    <p>
+        <Color builtin="magenta">
+            <ButtonToggle value={true}>
+                On
+            </ButtonToggle>
+            &nbsp;
+            <ButtonToggle value={false}>
+                Off
+            </ButtonToggle>
+        </Color>
+    </p>
+    <p>
+        <ButtonToggle disabled={true} value={true}>
+            On
+        </ButtonToggle>
+        &nbsp;
+        <ButtonToggle disabled={true} value={false}>
+            Off
+        </ButtonToggle>
+    </p>
+</Bluelib>
+```

src/components/ButtonToggle/index.js

@@ -0,0 +1,23 @@
+import React from "react"
+import useBluelibClassNames from "../../hooks/useBluelibClassNames"
+import classNames from "classnames"
+import Button from "../Button"
+
+
+export default function ButtonToggle({children, className, disabled, value, ...props}) {
+    return (
+        <Button
+            className={useBluelibClassNames(
+                classNames(
+                    "button",
+                    "button-toggle",
+                    value ? "button-toggle-on" : "button-toggle-off",
+                    disabled ? "status-disabled" : "status-clickable",
+                ), className
+            )}
+            {...props}
+        >
+            {children}
+        </Button>
+    )
+}

src/components/Color/index.js

@@ -24,8 +24,6 @@ export default function Color({children, builtin, custom}) {
         extraStyle["--bluelib-color-b"] = c.blue()
     }
 
-    console.log(`Builtin: ${builtin} → ${extraClassName}\nCustom: ${custom} → ${JSON.stringify(extraStyle)}`)
-
     children = React.Children.map(children, child => {
         if(!child.props) {
             return child;