diff --git a/packages/client/components/ui/components/design/Button.tsx b/packages/client/components/ui/components/design/Button.tsx
index c142304a0..7c67eb0bc 100644
--- a/packages/client/components/ui/components/design/Button.tsx
+++ b/packages/client/components/ui/components/design/Button.tsx
@@ -1,9 +1,11 @@
-import { Show, createRenderEffect, on, splitProps } from "solid-js";
+import { Show, createRenderEffect, mergeProps, on, splitProps } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
 import { AriaButtonProps, createButton } from "@solid-aria/button";
 import { cva } from "styled-system/css/cva";
 
+import { debounce } from "@revolt/common";
+
 import { Ripple } from "./Ripple";
 import { typography } from "./Text";
 
@@ -118,11 +120,19 @@ export function Button(props: Props) {
     ),
   );
 
-  const { buttonProps } = createButton(rest, () => ref);
+  const [btn, noBtnRest] = splitProps(rest, ["onPress"]);
+
+  //Eslint being silly, this is reactive
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, solid/reactivity
+  const onPress = debounce((e: any) => btn.onPress?.(e), 100),
+    btnRest = mergeProps(noBtnRest, { onPress });
+
+  const { buttonProps } = createButton(btnRest, () => ref);
   return (
     <button
       {...passthrough}
       {...buttonProps}
+      onTouchEnd={onPress}
       ref={ref}
       class={button({
         shape: shape(),
diff --git a/packages/client/components/ui/components/design/IconButton.tsx b/packages/client/components/ui/components/design/IconButton.tsx
index ae8953dc8..af2554ff7 100644
--- a/packages/client/components/ui/components/design/IconButton.tsx
+++ b/packages/client/components/ui/components/design/IconButton.tsx
@@ -1,9 +1,11 @@
-import { Show, splitProps } from "solid-js";
+import { mergeProps, Show, splitProps } from "solid-js";
 import { JSX } from "solid-js/jsx-runtime";
 
 import { AriaButtonProps, createButton } from "@solid-aria/button";
 import { cva } from "styled-system/css/cva";
 
+import { debounce } from "@revolt/common";
+
 import { Ripple } from "./Ripple";
 import { typography } from "./Text";
 
@@ -39,11 +41,19 @@ export function IconButton(props: Props) {
   ]);
   let ref: HTMLButtonElement | undefined;
 
-  const { buttonProps } = createButton(rest, () => ref);
+  const [btn, noBtnRest] = splitProps(rest, ["onPress"]);
+
+  //Eslint being silly, this is reactive
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, solid/reactivity
+  const onPress = debounce((e: any) => btn.onPress?.(e), 100),
+    restBtn = mergeProps(noBtnRest, { onPress });
+
+  const { buttonProps } = createButton(restBtn, () => ref);
   return (
     <button
       {...passthrough}
       {...buttonProps}
+      onTouchEnd={onPress}
       ref={ref}
       class={iconButton2({
         ...style,