diff --git a/ui/widgets/button.slint b/ui/widgets/button.slint
new file mode 100644
index 0000000..c0ea741
--- /dev/null
+++ b/ui/widgets/button.slint
@@ -0,0 +1,65 @@
+import { Metrics, DarkPalette } from "../theme.slint";
+
+export component Button {
+    in property <string> p-text;
+    in property <image> p-icon;
+    in property <bool> p-primary;
+    in property <bool> p-shadow;
+    in property <bool> p-enabled: true;
+    in property <int> p-elevation: 1;
+    in property <length> p-radius: Metrics.radius-md;
+
+    callback a-clicked;
+
+    private property <brush> p-text-color: DarkPalette.text[4];
+    private property <float> p-opacity: root.p-enabled ? 1.0 : 0.5;
+    private property <brush> p-background: root.p-primary ? DarkPalette.primary[p-elevation] : DarkPalette.secondary[p-elevation];
+    private property <brush> p-touch-color: root.p-primary ? DarkPalette.primary[p-elevation + 1] : DarkPalette.secondary[p-elevation + 1];
+
+    c-background := Rectangle {
+        width: 100%;
+        height: 100%;
+        border-radius: root.p-radius;
+        background: root.p-background;
+        opacity: root.p-opacity;
+        drop-shadow-color: DarkPalette.background[0];
+        drop-shadow-offset-y: root.p-shadow ? 1px : 0px;
+        drop-shadow-blur: (root.p-shadow ? p-elevation : 0) * 2px;
+    }
+
+    c-touch-area := TouchArea {
+        width: 100%;
+        height: 100%;
+
+        clicked => {
+            root.a-clicked();
+        }
+
+        if self.has-hover: Rectangle {
+            border-radius: root.p-radius;
+            background: root.p-touch-color;
+            opacity: 0.5;
+        }
+
+        if self.pressed: Rectangle {
+            border-radius: root.p-radius;
+            background: root.p-touch-color;
+        }
+    }
+
+    c-layout := HorizontalLayout {
+        if (root.p-icon.width > 0 && root.p-icon.height > 0): c-icon := Image {
+            source <=> root.p-icon;
+            width: Metrics.size-md;
+            opacity: root.p-opacity;
+        }
+
+        if (root.p-text != ""): c-text := Text {
+            text: root.p-text;
+            color: root.p-text-color;
+            opacity: root.p-opacity;
+            vertical-alignment: center;
+            horizontal-alignment: center;
+        }
+    }
+}