chore: copy button with doc

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/key-created-success-dialog.tsx

@@ -2,11 +2,10 @@
 
 import { RatelimitOverviewTooltip } from "@/app/(app)/ratelimits/[namespaceId]/_overview/components/table/components/ratelimit-overview-tooltip";
 import { ConfirmPopover } from "@/components/confirmation-popover";
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { Dialog, DialogContent } from "@/components/ui/dialog";
 import { toast } from "@/components/ui/toaster";
 import { ArrowRight, Check, CircleInfo, Eye, EyeSlash, Key2, Plus } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, CopyButton } from "@unkey/ui";
 import { useRef, useState } from "react";
 import { UNNAMED_KEY } from "../create-key.constants";
 import { SecretKey } from "./secret-key";

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/components/secret-key.tsx

@@ -1,9 +1,8 @@
 "use client"; // Keep if needed
 
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { cn } from "@/lib/utils";
 import { CircleLock, Eye, EyeSlash } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, CopyButton } from "@unkey/ui";
 import { useState } from "react";
 
 const maskKey = (key: string): string => {

apps/dashboard/app/(app)/apis/[apiId]/_components/create-key/hooks/use-fetch-identities/create-identity-options.tsx

@@ -1,7 +1,13 @@
-import { CopyButton } from "@/components/dashboard/copy-button";
 import type { Identity } from "@/lib/db";
 import { User } from "@unkey/icons";
-import { Button, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@unkey/ui";
+import {
+  Button,
+  CopyButton,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@unkey/ui";
 
 type IdentitySelectorProps = {
   identities: Omit<Identity, "deleted">[];

apps/dashboard/app/(app)/apis/[apiId]/keys/[keyAuthId]/[keyId]/settings/page.tsx

@@ -1,9 +1,9 @@
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { PageContent } from "@/components/page-content";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Code } from "@/components/ui/code";
 import { getAuth } from "@/lib/auth";
 import { and, db, eq, isNull, schema } from "@/lib/db";
+import { CopyButton } from "@unkey/ui";
 import { ArrowLeft } from "lucide-react";
 import Link from "next/link";
 import { notFound } from "next/navigation";

apps/dashboard/app/(app)/authorization/roles/[roleId]/tree.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { Switch } from "@/components/ui/switch";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { ChevronRight } from "@unkey/icons";
+import { CopyButton } from "@unkey/ui";
 import type React from "react";
 import { useEffect, useState } from "react";
 import { PermissionToggle } from "./permission-toggle";

apps/dashboard/app/(app)/identities/[identityId]/page.tsx

@@ -1,6 +1,5 @@
 import { notFound } from "next/navigation";
 
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { PageContent } from "@/components/page-content";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
@@ -17,6 +16,7 @@ import { getAuth } from "@/lib/auth";
 import { clickhouse } from "@/lib/clickhouse";
 import { db } from "@/lib/db";
 import { formatNumber } from "@/lib/fmt";
+import { CopyButton } from "@unkey/ui";
 import { Button } from "@unkey/ui";
 import { ChevronRight, Minus } from "lucide-react";
 import ms from "ms";

apps/dashboard/app/(app)/ratelimits/_components/ratelimit-client.tsx

@@ -1,7 +1,6 @@
 "use client";
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { EmptyComponentSpacer } from "@/components/empty-component-spacer";
-import { Button, Empty } from "@unkey/ui";
+import { Button, CopyButton, Empty } from "@unkey/ui";
 import { BookOpen } from "lucide-react";
 import { type PropsWithChildren, useState } from "react";
 import { RatelimitListControlCloud } from "./control-cloud";

apps/dashboard/app/(app)/settings/root-keys/new/client.tsx

@@ -1,10 +1,9 @@
 "use client";
 
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { Loading } from "@/components/dashboard/loading";
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Code } from "@/components/ui/code";
-import { Button } from "@unkey/ui";
+import { Button, CopyButton } from "@unkey/ui";
 
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Checkbox } from "@/components/ui/checkbox";

apps/dashboard/app/(app)/settings/workspace-navbar.tsx

@@ -1,11 +1,10 @@
 "use client";
 
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { QuickNavPopover } from "@/components/navbar-popover";
 import { Navbar } from "@/components/navigation/navbar";
 import { Badge } from "@/components/ui/badge";
 import { ChevronExpandY, Gear } from "@unkey/icons";
-import { Button } from "@unkey/ui";
+import { Button, CopyButton } from "@unkey/ui";
 import Link from "next/link";
 
 const settingsNavbar = [

apps/dashboard/app/new/create-ratelimit.tsx

@@ -1,10 +1,9 @@
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { Code } from "@/components/ui/code";
 import { getCurrentUser } from "@/lib/auth";
 import { router } from "@/lib/trpc/routers";
 import { createCallerFactory } from "@trpc/server";
 import type { Workspace } from "@unkey/db";
-import { Button } from "@unkey/ui";
+import { Button, CopyButton } from "@unkey/ui";
 import { GlobeLock } from "lucide-react";
 import Link from "next/link";
 

apps/dashboard/app/new/keys.tsx

@@ -1,6 +1,5 @@
 "use client";
 
-import { CopyButton } from "@/components/dashboard/copy-button";
 import { Loading } from "@/components/dashboard/loading";
 import { VisibleButton } from "@/components/dashboard/visible-button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
@@ -15,8 +14,7 @@ import {
 import { Code } from "@/components/ui/code";
 import { Separator } from "@/components/ui/separator";
 import { trpc } from "@/lib/trpc/client";
-import { Empty } from "@unkey/ui";
-import { Button } from "@unkey/ui";
+import { Button, CopyButton, Empty } from "@unkey/ui";
 import { AlertCircle, KeyRound, Lock } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";

apps/dashboard/components/navigation/copyable-id-button.tsx

@@ -1,6 +1,5 @@
-import { Button } from "@unkey/ui";
+import { Button, CopyButton } from "@unkey/ui";
 import { useRef } from "react";
-import { CopyButton } from "../dashboard/copy-button";
 
 type CopyableIDButtonProps = {
   value: string;

apps/engineering/content/design/components/button.mdx

@@ -2,10 +2,8 @@
 title: "Button"
 description: "A versatile button component with multiple variants, states, and sizes"
 ---
-
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { Button } from "@unkey/ui";
-import { ButtonWithKeyboardShortcut} from "./button";
 import { PlusIcon, SearchIcon, TrashIcon } from "lucide-react";
 
 # Button
@@ -960,7 +958,6 @@ Buttons can include icons from the Lucide library for enhanced visual meaning. I
 
 Buttons can display and respond to keyboard shortcuts for improved accessibility and power-user workflows.
 
-    <ButtonWithKeyboardShortcut />
 
 
 

apps/engineering/content/design/components/buttons/copy-button.examples.tsx

@@ -0,0 +1,19 @@
+import { RenderComponentWithSnippet } from "@/app/components/render";
+import { CopyButton } from "@unkey/ui";
+export const Default = () => {
+  const apiKey = "uk_1234567890abcdef";
+  return (
+    <RenderComponentWithSnippet>
+      <div className="flex flex-row justify-center gap-8">
+        <div className="flex gap-2">
+          <span>Basic usage:</span>
+          <CopyButton value="Hello World!" />
+        </div>
+        <div className="flex gap-2 border px-2 py-1 rounded-md w-fit">
+          <span className="font-mono text-sm">{apiKey}</span>
+          <CopyButton value={apiKey} src="api-key-display" className="hover:bg-gray-100 rounded" />
+        </div>
+      </div>
+    </RenderComponentWithSnippet>
+  );
+};

apps/engineering/content/design/components/copy-button.mdx

@@ -0,0 +1,38 @@
+---
+title: CopyButton
+summary: A button component that copies text to clipboard with visual feedback
+---
+import { Default } from "./buttons/copy-button.examples"
+
+The `CopyButton` component provides a simple way to copy text to the clipboard with visual feedback. When clicked, it copies the provided text and shows a checkmark icon to indicate success.
+
+## Features
+
+- Visual feedback with icon change on copy
+- Accessible with screen reader support
+- Automatic reset after 2 seconds
+- Customizable through className prop
+- TypeScript support
+
+## Props
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `value` | `string` | The text content to be copied to clipboard |
+| `src` | `string?` | Optional source identifier for analytics |
+| `className` | `string?` | Additional CSS classes to apply to the button |
+
+## Usage
+
+<Default />
+
+## Accessibility
+
+The component includes screen reader support with an appropriate "Copy" label. The visual state change (unchecked to checked icon) provides clear feedback for all users.
+
+## Behavior
+
+1. On click, the button copies the provided text to the clipboard
+2. The icon changes from an unchecked to checked state
+3. After 2 seconds, the icon reverts to its original state
+4. Parent click events are prevented from triggering (e.stopPropagation)

apps/dashboard/components/dashboard/copy-button.tsx → internal/ui/src/components/copy-button.tsx

@@ -1,7 +1,7 @@
 "use client";
-import { cn } from "@/lib/utils";
 import { TaskChecked, TaskUnchecked } from "@unkey/icons";
 import * as React from "react";
+import { cn } from "../lib/utils";
 
 interface CopyButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   value: string;

internal/ui/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./components/button";
+export * from "./components/copy-button";
 export * from "./components/date-time/date-time";
 export * from "./components/empty";
 export * from "./components/form";