From 4c5dc4df41f0abf5c845f1741768b168111ecb1f Mon Sep 17 00:00:00 2001
From: Benjamin Palko <benjaminpalko@hotmail.com>
Date: Thu, 28 Aug 2025 10:56:26 -0400
Subject: [PATCH] styled icon button

---
 components/StyledIconButton.qml | 38 +++++++++++++++++++++++++++++++++
 modules/storybook/Storybook.qml | 13 +++++++++++
 2 files changed, 51 insertions(+)
 create mode 100644 components/StyledIconButton.qml

diff --git a/components/StyledIconButton.qml b/components/StyledIconButton.qml
new file mode 100644
index 0000000..88caaf9
--- /dev/null
+++ b/components/StyledIconButton.qml
@@ -0,0 +1,38 @@
+import qs.config
+import QtQuick
+import QtQuick.Controls
+
+RoundButton {
+    id: control
+
+    radius: 8
+    font.family: Theme.lucide.font.family
+    font.pixelSize: 15
+    font.bold: true
+    padding: 8
+
+    HoverHandler {
+        cursorShape: Qt.PointingHandCursor
+    }
+
+    contentItem: Text {
+        text: control.text
+        color: control.hovered ? Theme.palette.primarycontent : Theme.palette.basecontent
+        Behavior on color {
+            ColorAnimation {
+                duration: 100
+            }
+        }
+        font: control.font
+    }
+
+    background: Rectangle {
+        color: control.hovered ? Theme.palette.primary : Theme.palette.base100
+        Behavior on color {
+            ColorAnimation {
+                duration: 100
+            }
+        }
+        radius: control.radius
+    }
+}
diff --git a/modules/storybook/Storybook.qml b/modules/storybook/Storybook.qml
index 1647923..7603c6d 100644
--- a/modules/storybook/Storybook.qml
+++ b/modules/storybook/Storybook.qml
@@ -2,6 +2,7 @@ pragma ComponentBehavior: Bound
 
 import qs.components
 import qs.config
+import qs.constants
 import qs.services
 import qs.widgets
 import Quickshell.Hyprland
@@ -45,9 +46,21 @@ StyledWindow {
                 Layout.alignment: Qt.AlignHCenter
                 text: "Components"
                 font.pixelSize: 24
+                font.bold: true
+                font.underline: true
                 bottomPadding: 24
             }
 
+            ColumnLayout {
+                StyledText {
+                    text: "Switch"
+                    font.pixelSize: 18
+                }
+                StyledIconButton {
+                    text: Icons.square
+                }
+            }
+
             ColumnLayout {
                 StyledText {
                     text: "Switch"