componenets standardization 1

frontend/src/components/tasks/RelationshipMap.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "react-router-dom";
 import { ArrowRightIcon } from "../../icons";
+import Button from "../ui/button/Button";
 
 export interface RelationshipData {
   taskId: number;
@@ -43,13 +44,15 @@ const RelationshipMap: React.FC<RelationshipMapProps> = ({
           <>
             <div className="flex flex-wrap items-center gap-1">
               {task.keywordNames?.slice(0, 3).map((keyword, idx) => (
-                <button
+                <Button
                   key={idx}
                   onClick={() => onNavigate?.("keyword", task.keywordIds![idx])}
-                  className="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors"
+                  variant="ghost"
+                  tone="neutral"
+                  size="xs"
                 >
                   {keyword}
-                </button>
+                </Button>
               ))}
               {task.keywordIds.length > 3 && (
                 <span className="px-2 py-0.5 rounded bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400">