diff --git a/packages/ui/src/components/button.tsx b/packages/ui/src/components/button.tsx
new file mode 100644
index 000000000..027e4856c
--- /dev/null
+++ b/packages/ui/src/components/button.tsx
@@ -0,0 +1,42 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import React from "react";
+import {
+  Button as ThemeUIButton,
+  ButtonProps as ThemeUIButtonProps
+} from "@theme-ui/components";
+import { Theme } from "@notesnook/theme";
+import { RestrictedSpaceProps, RestrictedSxProp } from "../utils/types.js";
+
+export interface ButtonProps
+  extends Omit<
+      ThemeUIButtonProps,
+      "variant" | "sx" | keyof RestrictedSpaceProps
+    >,
+    RestrictedSpaceProps {
+  variant?: keyof Theme["buttons"];
+  sx?: RestrictedSxProp;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    return <ThemeUIButton ref={ref} {...props} />;
+  }
+);
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index c39606d3d..d3df1336a 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -21,3 +21,4 @@ export * from "./icon/index.js";
 export * from "./menu/index.js";
 export * from "./popup-presenter/index.js";
 export * from "./scroll-container/index.js";
+export * from "./button.js";
diff --git a/packages/ui/src/utils/index.ts b/packages/ui/src/utils/index.ts
index 1994fac0a..47b00654e 100644
--- a/packages/ui/src/utils/index.ts
+++ b/packages/ui/src/utils/index.ts
@@ -18,3 +18,4 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
 export * from "./position.js";
+export * from "./types.js";
diff --git a/packages/ui/src/utils/types.ts b/packages/ui/src/utils/types.ts
new file mode 100644
index 000000000..31bc56c0b
--- /dev/null
+++ b/packages/ui/src/utils/types.ts
@@ -0,0 +1,66 @@
+/*
+This file is part of the Notesnook project (https://notesnook.com/)
+
+Copyright (C) 2023 Streetwriters (Private) Limited
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+*/
+
+import { Theme } from "@notesnook/theme";
+import { ThemeUIStyleObject } from "@theme-ui/core";
+
+type ThemeSpace = Theme["space"];
+
+type ValidSpaceValues =
+  | Exclude<keyof ThemeSpace, keyof Array<any> | "small">
+  | "small"
+  | number;
+
+export type RestrictedSpaceProps = {
+  [K in
+    | "m"
+    | "mt"
+    | "mr"
+    | "mb"
+    | "ml"
+    | "mx"
+    | "my"
+    | "margin"
+    | "marginTop"
+    | "marginRight"
+    | "marginBottom"
+    | "marginLeft"
+    | "marginX"
+    | "marginY"
+    | "p"
+    | "pt"
+    | "pr"
+    | "pb"
+    | "pl"
+    | "px"
+    | "py"
+    | "padding"
+    | "paddingTop"
+    | "paddingRight"
+    | "paddingBottom"
+    | "paddingLeft"
+    | "paddingX"
+    | "paddingY"]?: ValidSpaceValues | (ValidSpaceValues | null)[];
+};
+
+export type RestrictedSxProp = Omit<
+  ThemeUIStyleObject,
+  keyof RestrictedSpaceProps
+> &
+  RestrictedSpaceProps;