diff --git a/packages/ui/components/button/button.stories.mdx b/packages/ui/components/button/button.stories.mdx
index c4cafd4e95..4ee81d5b30 100644
--- a/packages/ui/components/button/button.stories.mdx
+++ b/packages/ui/components/button/button.stories.mdx
@@ -1,3 +1,4 @@
+import { TooltipProvider } from "@radix-ui/react-tooltip";
 import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs";
 
 import {
@@ -17,7 +18,7 @@ import { Button } from "./Button";
 
 <Meta title="UI/Button" component={Button} />
 
-<Title title="Buttons" suffix="Brief" subtitle="Version 2.0 — Last Update: 22 Aug 2022" />
+<Title title="Buttons" suffix="Brief" subtitle="Version 2.1 — Last Update: 24 Aug 2023" />
 
 ## Definition
 
@@ -170,6 +171,15 @@ Button are clickable elements that initiates user actions. Labels in the button
   </Story>
   <Story
     name="Button Playground"
+     play={({ canvasElement }) => {
+      const darkVariantContainer = canvasElement.querySelector('[data-mode="dark"]');
+      const buttonElement = darkVariantContainer.querySelector("button");
+      buttonElement?.addEventListener("mouseover", () => {
+        setTimeout(() => {
+          document.querySelector('[data-testid="tooltip"]').classList.add("dark");
+        }, 55);
+      });
+    }}
     args={{
       color: "primary",
       size: "base",
@@ -177,6 +187,7 @@ Button are clickable elements that initiates user actions. Labels in the button
       disabled: false,
       children: "Button text",
       className: "",
+      tooltip: "tooltip",
     }}
     argTypes={{
       color: {
@@ -212,19 +223,20 @@ Button are clickable elements that initiates user actions. Labels in the button
           options: ["", "sb-pseudo--hover", "sb-pseudo--focus"],
         },
       },
+      tooltip: {
+        control: {
+          type: "text",
+        },
+      },
     }}>
-    {({ color, size, loading, disabled, children, className }) => (
+    {({ children, ...args }) => (
       <VariantsTable titles={["Light & Dark Modes"]} columnMinWidth={150}>
         <VariantRow variant="Button">
-          <Button
-            color={color}
-            size={size}
-            variant="default"
-            loading={loading}
-            disabled={disabled}
-            className={className}>
-            {children}
-          </Button>
+          <TooltipProvider>
+            <Button variant="default" {...args}>
+              {children}
+            </Button>
+          </TooltipProvider>
         </VariantRow>
       </VariantsTable>
     )}