From dbc0daa64b4ae7cb0f94f850d18ffbd5a04e1431 Mon Sep 17 00:00:00 2001
From: Jake Howell <jacob@coder.com>
Date: Fri, 27 Feb 2026 21:22:57 +1100
Subject: [PATCH] feat: add animation to copy button `<Check />`s (#22319)

This pull-request adds a tiny little animation for the `<Check />` when
the copy button activates. This is inline with how `sonner` does their
animations (means things are a little more uniform).


![preview-check-animation](https://github.com/user-attachments/assets/533f644a-1d86-4b11-8ca3-c670a9913b57)
---
 site/src/components/AnimatedIcons/Check.tsx   | 19 +++++++++++++++++++
 site/src/components/CopyButton/CopyButton.tsx |  3 ++-
 .../UserDropdown/UserDropdownContent.tsx      |  2 +-
 3 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 site/src/components/AnimatedIcons/Check.tsx

diff --git a/site/src/components/AnimatedIcons/Check.tsx b/site/src/components/AnimatedIcons/Check.tsx
new file mode 100644
index 0000000000..beeaedcd0a
--- /dev/null
+++ b/site/src/components/AnimatedIcons/Check.tsx
@@ -0,0 +1,19 @@
+import { CheckIcon as LucideCheckIcon } from "lucide-react";
+import { cn } from "utils/cn";
+
+type CheckIconProps = React.ComponentProps<typeof LucideCheckIcon>;
+
+export const CheckIcon: React.FC<CheckIconProps> = ({
+	className,
+	...props
+}) => {
+	return (
+		<LucideCheckIcon
+			className={cn(
+				"animate-in fade-in-0 zoom-in-[0.8] duration-300",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
index 52f8cfa9e1..afc7007c74 100644
--- a/site/src/components/CopyButton/CopyButton.tsx
+++ b/site/src/components/CopyButton/CopyButton.tsx
@@ -1,3 +1,4 @@
+import { CheckIcon } from "components/AnimatedIcons/Check";
 import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	Tooltip,
@@ -5,7 +6,7 @@ import {
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useClipboard } from "hooks/useClipboard";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CopyIcon } from "lucide-react";
 import type { FC } from "react";
 
 type CopyButtonProps = ButtonProps & {
diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
index b787949fee..53248926b4 100644
--- a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
+++ b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -1,4 +1,5 @@
 import type * as TypesGen from "api/typesGenerated";
+import { CheckIcon } from "components/AnimatedIcons/Check";
 import {
 	DropdownMenuItem,
 	DropdownMenuSeparator,
@@ -10,7 +11,6 @@ import {
 } from "components/Tooltip/Tooltip";
 import { useClipboard } from "hooks/useClipboard";
 import {
-	CheckIcon,
 	CircleUserIcon,
 	CopyIcon,
 	LogOutIcon,