styled icon button

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
+    }
+}

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"