diff --git a/.storybook/components/ElementNamer.jsx b/.storybook/components/ElementNamer.jsx
new file mode 100644
index 0000000000..e0971ec833
--- /dev/null
+++ b/.storybook/components/ElementNamer.jsx
@@ -0,0 +1,37 @@
+import React, { useEffect } from 'react';
+
+export const TableNamer = ({ names }) => {
+  useEffect(() => {
+    const tables = document.querySelectorAll('table:not([aria-hidden="true"])');
+    if (tables.length !== names.length) {
+      console.error(
+        '🦒: TableNamer: number of tables does not match number of names',
+        `Found ${tables?.length ?? 0} and was provided ${names?.length ?? 0}`
+      );
+    }
+    for (let i = 0; i < tables.length; i++) {
+      tables[i].setAttribute('title', names[i]);
+    }
+  }, [names]);
+  return <></>;
+};
+
+export const CopyButtonNamer = ({ names }) => {
+  useEffect(() => {
+    const onWindowLoadHander = () => {
+      const buttons = document.getElementsByClassName('css-3ltsna');
+      if (buttons.length !== names.length) {
+        console.error(
+          '🦒: CopyButtonNamer: number of buttons does not match number of names',
+          `Found ${buttons?.length ?? 0} buttons and was provided ${names?.length ?? 0} names`
+        );
+      }
+      for (let i = 0; i < buttons.length; i++) {
+        buttons[i].setAttribute('aria-label', names[i]);
+      }
+    };
+    window.addEventListener('load', onWindowLoadHander);
+    return () => window.removeEventListener('load', onWindowLoadHander);
+  }, [names]);
+  return <></>;
+};
diff --git a/.storybook/components/TableNamer.jsx b/.storybook/components/TableNamer.jsx
deleted file mode 100644
index 7612a66738..0000000000
--- a/.storybook/components/TableNamer.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import React, { useEffect } from "react";
-
-export const TableNamer = ({names}) => {
-    useEffect(() => {
-      const tables = document.querySelectorAll('table:not([aria-hidden="true"])');
-      if (tables.length !== names.length) {
-        console.error(
-            '🦒: TableNamer: number of tables does not match number of names',
-            `Found ${tables?.length ?? 0} and was provided ${names?.length ?? 0}`
-        );
-      }
-      for (let i = 0; i < tables.length; i++) {
-        tables[i].setAttribute('title', names[i]);
-      }
-    }, []);
-    return <></>
-};
diff --git a/stories/overview.stories.mdx b/stories/overview.stories.mdx
index ea9a3f0721..2f8e03456d 100644
--- a/stories/overview.stories.mdx
+++ b/stories/overview.stories.mdx
@@ -1,7 +1,7 @@
 import { Meta, Source } from '@storybook/addon-docs';
 import { PACKAGE_VERSION } from '@microsoft/mgt';
 import { versionInfo } from '../.storybook/versionInfo';
-import { TableNamer } from '../.storybook/components/TableNamer';
+import { TableNamer, CopyButtonNamer } from '../.storybook/components/ElementNamer';
 
 <Meta title="Overview" />
 
@@ -105,3 +105,4 @@ The Microsoft Graph Toolkit is supported in the following browsers.
 - Check out the Microsoft Graph Toolkit on [GitHub](https://aka.ms/mgt).
 
 <TableNamer names={['Microsoft Graph Toolkit Components', 'Components in preview', 'Microsoft Graph Toolkit Providers', 'Supported browsers']}/>
+<CopyButtonNamer names={['Copy mgt-loader script tag', 'Copy npm install command']}/>