noStyle option

packages/frontend/src/components/log-out-button.tsx

@@ -1,8 +1,9 @@
 import { LogOut } from "lucide-react";
 import { useNavigate } from "react-router-dom";
 import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
 
-export default function LogOutButton() {
+export default function LogOutButton({ noStyle = false }: { noStyle?: boolean }) {
     const navigate = useNavigate();
 
     const logOut = () => {
@@ -13,7 +14,12 @@ export default function LogOutButton() {
     };
 
     return (
-        <Button onClick={logOut} variant={"destructive"} className="flex gap-2 items-center">
+        <Button
+            onClick={logOut}
+            variant={noStyle ? "dummy" : "destructive"}
+            className={cn("flex gap-2 items-center", noStyle && "px-2 py-1 m-0 h-auto")}
+            size={noStyle ? "none" : "default"}
+        >
             Log out
             <LogOut size={15} />
         </Button>

packages/frontend/src/components/ui/button.tsx

@@ -20,6 +20,7 @@ const buttonVariants = cva(
                 dummy: "",
             },
             size: {
+                none: "",
                 default: "h-9 px-4 py-2 has-[>svg]:px-3",
                 sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
                 lg: "h-10 px-6 has-[>svg]:px-4",