icon button an recipients ui

packages/ui/components/button/Button.tsx

@@ -20,6 +20,7 @@ export function Button(props: any) {
         color === "primary" ? primaryStyles : secondaryStyles,
         props.className
       )}
+      hidden={props.hidden}
     >
       {props.icon ? (
         <props.icon
@@ -41,6 +42,7 @@ export function Button(props: any) {
       )}
       onClick={props.onClick}
       disabled={props.disabled}
+      hidden={props.hidden}
     >
       {props.icon ? (
         <props.icon

packages/ui/components/button/IconButton.tsx

@@ -0,0 +1,54 @@
+import { classNames } from "@documenso/lib";
+import Link from "next/link";
+import React from "react";
+
+export function IconButton(props: any) {
+  const isLink = typeof props.href !== "undefined";
+  const { color = "primary", icon, disabled, onClick } = props;
+  const baseStyles = "disabled:text-gray-300";
+  const primaryStyles = "text-neon hover:text-neon-dark";
+  const secondaryStyles = "text-gray-700 hover:text-neon-dark";
+
+  return isLink ? (
+    <Link
+      id={props.id}
+      href={props.href}
+      className={classNames(
+        baseStyles,
+        color === "primary" ? primaryStyles : secondaryStyles,
+        props.className
+      )}
+      hidden={props.hidden}
+    >
+      {props.icon ? (
+        <props.icon
+          className="inline text-inherit h-6 mr-1"
+          aria-hidden="true"
+        ></props.icon>
+      ) : (
+        ""
+      )}
+    </Link>
+  ) : (
+    <button
+      id={props.id}
+      className={classNames(
+        baseStyles,
+        color === "primary" ? primaryStyles : secondaryStyles,
+        props.className
+      )}
+      onClick={props.onClick}
+      disabled={props.disabled}
+      hidden={props.hidden}
+    >
+      {props.icon ? (
+        <props.icon
+          className="inline text-inherit h-6 mr-1"
+          aria-hidden="true"
+        ></props.icon>
+      ) : (
+        ""
+      )}
+    </button>
+  );
+}

packages/ui/components/button/index.ts

@@ -1 +1,2 @@
 export { Button } from "./Button";
+export { IconButton } from "./IconButton";

packages/ui/index.ts

@@ -1,2 +1,2 @@
-export { Button } from "./components/button/index";
+export { Button, IconButton } from "./components/button/index";
 export { Breadcrumb } from "./components/breadcrumb/index";