diff --git a/ui/src/frontend/viewer_page/track_view.ts b/ui/src/frontend/viewer_page/track_view.ts
index 602992b921a..ba2bd902a4c 100644
--- a/ui/src/frontend/viewer_page/track_view.ts
+++ b/ui/src/frontend/viewer_page/track_view.ts
@@ -54,9 +54,9 @@ import {calculateResolution} from './resolution';
 import {Trace} from '../../public/trace';
 import {Anchor} from '../../widgets/anchor';
 import {showModal} from '../../widgets/modal';
-import {copyToClipboard} from '../../base/clipboard';
 import {Popup} from '../../widgets/popup';
 import {Theme} from '../../public/theme';
+import {CodeSnippet} from '../../widgets/code_snippet';
 
 const TRACK_HEIGHT_MIN_PX = 18;
 
@@ -723,13 +723,7 @@ function renderTrackDetailsMenu(node: TrackNode, descriptor?: Track) {
               onclick: () => {
                 showModal({
                   title: 'Query for track',
-                  content: m('pre', query),
-                  buttons: [
-                    {
-                      text: 'Copy to clipboard',
-                      action: () => copyToClipboard(query),
-                    },
-                  ],
+                  content: () => m(CodeSnippet, {text: query, language: 'SQL'}),
                 });
               },
             },
diff --git a/ui/src/widgets/code_snippet.ts b/ui/src/widgets/code_snippet.ts
index 5fa623b4f3b..f70fef95a93 100644
--- a/ui/src/widgets/code_snippet.ts
+++ b/ui/src/widgets/code_snippet.ts
@@ -13,9 +13,9 @@
 // limitations under the License.
 
 import m from 'mithril';
-import {copyToClipboard} from '../base/clipboard';
 import {classNames} from '../base/classnames';
-import {Button, ButtonVariant} from './button';
+import {ButtonVariant} from './button';
+import {CopyToClipboardButton} from './copy_to_clipboard_button';
 
 interface CodeSnippetAttrs {
   // The text to be displayed in the code snippet.
@@ -38,9 +38,8 @@ export class CodeSnippet implements m.ClassComponent<CodeSnippetAttrs> {
       m(
         '.pf-code-snippet-header',
         m('span.pf-code-snippet-language', language),
-        m(Button, {
-          onclick: () => copyToClipboard(text),
-          icon: 'content_copy',
+        m(CopyToClipboardButton, {
+          textToCopy: text,
           variant: ButtonVariant.Minimal,
           title: 'Copy to clipboard',
         }),