diff --git a/apps/web/pages/documents/[id]/recipients.tsx b/apps/web/pages/documents/[id]/recipients.tsx
index fe0fa0165..f3c0ea919 100644
--- a/apps/web/pages/documents/[id]/recipients.tsx
+++ b/apps/web/pages/documents/[id]/recipients.tsx
@@ -10,6 +10,7 @@ import { useRouter } from "next/router";
 import { toast } from "react-hot-toast";
 import { getDocument } from "@documenso/lib/query";
 import { Document as PrismaDocument } from "@prisma/client";
+import { Button } from "@documenso/ui";
 
 const RecipientsPage: NextPageWithLayout = (props: any) => {
   const router = useRouter();
@@ -20,8 +21,6 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
       <Head>
         <title>{title}</title>
       </Head>
-      {/* -todo add signers ui -todo add breadcrumps -todo who will sign this
-      dropdown */}
       <div className="mt-10">
         <div>
           <nav className="sm:hidden" aria-label="Back">
@@ -94,24 +93,17 @@ const RecipientsPage: NextPageWithLayout = (props: any) => {
             </h2>
           </div>
           <div className="mt-4 flex flex-shrink-0 md:mt-0 md:ml-4">
-            <button
-              type="button"
-              disabled={(props?.document?.Recipient?.length || 0) === 0}
+            <Button
+              color="primary"
+              icon={PaperAirplaneIcon}
               onClick={() => {
-                if (
-                  confirm(
-                    `Send document out to ${props?.document?.Recipient?.length} recipients?`
-                  )
-                ) {
-                  router.push("/documents/" + props.document.id);
-                  toast.success("Document sent!");
-                }
+                alert();
+                // todo do stuff
               }}
-              className="ml-3 inline-flex items-center rounded-md border border-transparent  disabled:bg-gray-300 bg-neon px-4 py-2 text-sm font-medium text-white shadow-sm bg-grey hover:bg-neon-dark focus:outline-none focus:ring-2 focus:neon-dark focus:ring-offset-2"
+              disabled={(props?.document?.Recipient?.length || 0) === 0}
             >
-              <PaperAirplaneIcon className="inline text-white w-4 mr-1"></PaperAirplaneIcon>
               Send
-            </button>
+            </Button>
           </div>
         </div>
         <div className="overflow-hidden rounded-md bg-white shadow mt-10 p-6">
diff --git a/packages/ui/components/button/Button.tsx b/packages/ui/components/button/Button.tsx
new file mode 100644
index 000000000..e4973d996
--- /dev/null
+++ b/packages/ui/components/button/Button.tsx
@@ -0,0 +1,34 @@
+import { classNames } from "@documenso/lib";
+import Link from "next/link";
+import React from "react";
+import { Tooltip } from "react-tooltip";
+import short from "short-uuid";
+
+export function Button(props: any) {
+  const isLink = typeof props.href !== "undefined";
+  const { color = "primary", icon, disabled, onClick } = props;
+  const baseStyles =
+    "inline-flex items-center justify-center rounded-md border border-transparent px-4 py-2 text-sm font-medium text-white shadow-sm sm:w-auto disabled:bg-gray-300";
+  const primaryStyles = "bg-neon hover:bg-neon-dark";
+  const secondaryStyles =
+    "border-gray-300 bg-white text-gray-700 hover:bg-gray-50";
+
+  return isLink ? (
+    <Link id={props.id} href={props.href} className={classNames(baseStyles)}>
+      {props.children}
+    </Link>
+  ) : (
+    <button
+      id={props.id}
+      className={classNames(
+        baseStyles,
+        color === "primary" ? primaryStyles : secondaryStyles
+      )}
+      onClick={props.onClick}
+      {...props}
+    >
+      <props.icon className="inline text-inherit w-4 mr-1"></props.icon>
+      {props.children}
+    </button>
+  );
+}
diff --git a/packages/ui/components/button/index.ts b/packages/ui/components/button/index.ts
new file mode 100644
index 000000000..398a3c509
--- /dev/null
+++ b/packages/ui/components/button/index.ts
@@ -0,0 +1 @@
+export { Button } from "./button";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index cb0ff5c3b..57b01f643 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1 +1 @@
-export {};
+export { Button } from "./components/./button";
