IconButton

Modules/Bar/Bar.qml

@@ -35,6 +35,10 @@ PanelWindow {
         label: "Label"
         description: "Description"
       }
+
+      NoctaliaIconButton {
+        icon: "refresh"
+      }
     }
   }
 }

Widgets/NoctaliaIconButton.qml

@@ -1,14 +1,21 @@
 import QtQuick
 import Quickshell
 import Quickshell.Widgets
-import qs.Settings
+import qs.Services
+import qs.Theme
 
 MouseArea {
   id: root
+
+  // Local scale convenience with safe fallback
+  readonly property real scale: (typeof screen !== 'undefined'
+                                 && screen) ? Scaling.scale(screen) : 1.0
+
   property string icon
   property bool enabled: true
   property bool hovering: false
   property real size: 32
+
   cursorShape: Qt.PointingHandCursor
   implicitWidth: size
   implicitHeight: size
@@ -18,19 +25,21 @@ MouseArea {
   onExited: hovering = false
 
   Rectangle {
+
     anchors.fill: parent
-    radius: 8
+    radius: width * 0.5
     color: root.hovering ? Theme.accentPrimary : "transparent"
-  }
+
-  Text {
+    Text {
-    id: iconText
+      id: iconText
-    anchors.centerIn: parent
+      anchors.centerIn: parent
-    text: root.icon
+      text: root.icon
-    font.family: "Material Symbols Outlined"
+      font.family: "Material Symbols Outlined"
-    font.pixelSize: 24 * Theme.scale(screen)
+      font.pixelSize: 24 * scale
-    color: root.hovering ? Theme.onAccent : Theme.textPrimary
+      color: root.hovering ? Theme.onAccent : Theme.textPrimary
-    horizontalAlignment: Text.AlignHCenter
+      horizontalAlignment: Text.AlignHCenter
-    verticalAlignment: Text.AlignVCenter
+      verticalAlignment: Text.AlignVCenter
-    opacity: root.enabled ? 1.0 : 0.5
+      opacity: root.enabled ? 1.0 : 0.5
+    }
   }
 }