Consolidate copy button implementations to use IconButton (#11832)

* Consolidate copy button implementations to use IconButton

Replace custom copy button styling in Textbox and Dialogue components with standardized IconButton from atoms. This fixes dark mode visibility issues in citrus theme and reduces code duplication by removing 38 lines of duplicate CSS.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* add changeset

* add changeset

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

Author: 3 people

.changeset/old-parrots-fold.md

@@ -0,0 +1,7 @@
+---
+"@gradio/dialogue": patch
+"@gradio/textbox": patch
+"gradio": patch
+---
+
+feat:Consolidate copy button implementations to use IconButton

js/dialogue/Dialogue.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher, tick, onMount } from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
+	import { BlockTitle, IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import { Copy, Check, Send, Plus, Trash } from "@gradio/icons";
 	import { fade } from "svelte/transition";
 	import { BaseDropdown, BaseDropdownOptions } from "@gradio/dropdown";
@@ -454,21 +454,13 @@
 
 <label class:container>
 	{#if show_label && show_copy_button}
-		{#if copied}
-			<button
-				in:fade={{ duration: 300 }}
-				class="copy-button"
-				aria-label="Copied"
-				aria-roledescription="Text copied"><Check /></button
-			>
-		{:else}
-			<button
+		<IconButtonWrapper>
+			<IconButton
+				Icon={copied ? Check : Copy}
 				on:click={handle_copy}
-				class="copy-button"
-				aria-label="Copy"
-				aria-roledescription="Copy text"><Copy /></button
-			>
-		{/if}
+				label={copied ? "Copied" : "Copy"}
+			/>
+		</IconButtonWrapper>
 	{/if}
 
 	<BlockTitle {show_label} {info}>{label}</BlockTitle>
@@ -933,27 +925,6 @@
 		width: 22px;
 	}
 
-	.copy-button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--border-color-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
-
 	.tag-menu {
 		position: absolute;
 		width: 100%;

js/textbox/shared/Textbox.svelte

@@ -5,7 +5,7 @@
 		createEventDispatcher,
 		tick
 	} from "svelte";
-	import { BlockTitle } from "@gradio/atoms";
+	import { BlockTitle, IconButton, IconButtonWrapper } from "@gradio/atoms";
 	import { Copy, Check, Send, Square } from "@gradio/icons";
 	import { fade } from "svelte/transition";
 	import type { SelectData, CopyData } from "@gradio/utils";
@@ -238,21 +238,13 @@
 <!-- svelte-ignore a11y-autofocus -->
 <label class:container class:show_textbox_border>
 	{#if show_label && show_copy_button}
-		{#if copied}
-			<button
-				in:fade={{ duration: 300 }}
-				class="copy-button"
-				aria-label="Copied"
-				aria-roledescription="Text copied"><Check /></button
-			>
-		{:else}
-			<button
+		<IconButtonWrapper>
+			<IconButton
+				Icon={copied ? Check : Copy}
 				on:click={handle_copy}
-				class="copy-button"
-				aria-label="Copy"
-				aria-roledescription="Copy text"><Copy /></button
-			>
-		{/if}
+				label={copied ? "Copied" : "Copy"}
+			/>
+		</IconButtonWrapper>
 	{/if}
 	<BlockTitle {show_label} {info}>{label}</BlockTitle>
 
@@ -449,27 +441,6 @@
 		color: var(--input-placeholder-color);
 	}
 
-	.copy-button {
-		display: flex;
-		position: absolute;
-		top: var(--block-label-margin);
-		right: var(--block-label-margin);
-		align-items: center;
-		box-shadow: var(--shadow-drop);
-		border: 1px solid var(--border-color-primary);
-		border-top: none;
-		border-right: none;
-		border-radius: var(--block-label-right-radius);
-		background: var(--block-label-background-fill);
-		padding: 5px;
-		width: 22px;
-		height: 22px;
-		overflow: hidden;
-		color: var(--block-label-color);
-		font: var(--font-sans);
-		font-size: var(--button-small-text-size);
-	}
-
 	/* Same submit button style as MultimodalTextbox for the consistent UI */
 	.input-container {
 		display: flex;