diff --git a/code/addons/docs/src/blocks/controls/Boolean.tsx b/code/addons/docs/src/blocks/controls/Boolean.tsx
index ee89ab44d8cf..11484bc300c6 100644
--- a/code/addons/docs/src/blocks/controls/Boolean.tsx
+++ b/code/addons/docs/src/blocks/controls/Boolean.tsx
@@ -1,13 +1,11 @@
 import type { FC } from 'react';
 import React, { useCallback } from 'react';
 
-import { Button } from 'storybook/internal/components';
-
 import { opacify, transparentize } from 'polished';
 import type { CSSObject, StorybookTheme } from 'storybook/theming';
 import { srOnlyStyles, styled } from 'storybook/theming';
 
-import { getControlId, getControlSetterButtonId } from './helpers';
+import { getControlId, SetValueButton } from './helpers';
 import type { BooleanConfig, BooleanValue, ControlProps } from './types';
 
 const getBooleanControlStyles = (theme: StorybookTheme): CSSObject => ({
@@ -133,16 +131,9 @@ export const BooleanControl: FC<BooleanProps> = ({
   const readonly = !!argType?.table?.readonly;
   if (value === undefined) {
     return (
-      <Button
-        ariaLabel={false}
-        variant="outline"
-        size="medium"
-        id={getControlSetterButtonId(name, storyId)}
-        onClick={onSetFalse}
-        disabled={readonly}
-      >
+      <SetValueButton name={name} storyId={storyId} onClick={onSetFalse} disabled={readonly}>
         Set boolean
-      </Button>
+      </SetValueButton>
     );
   }
   const controlId = getControlId(name, storyId);
diff --git a/code/addons/docs/src/blocks/controls/Number.tsx b/code/addons/docs/src/blocks/controls/Number.tsx
index a3f33db74de7..e875e7bfcf4e 100644
--- a/code/addons/docs/src/blocks/controls/Number.tsx
+++ b/code/addons/docs/src/blocks/controls/Number.tsx
@@ -1,11 +1,11 @@
 import type { ChangeEvent, FC } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 
-import { Button, Form } from 'storybook/internal/components';
+import { Form } from 'storybook/internal/components';
 
 import { styled } from 'storybook/theming';
 
-import { getControlId, getControlSetterButtonId } from './helpers';
+import { getControlId, SetValueButton } from './helpers';
 import type { ControlProps, NumberConfig, NumberValue } from './types';
 
 const Wrapper = styled.label({
@@ -99,16 +99,9 @@ export const NumberControl: FC<NumberProps> = ({
 
   if (value === undefined) {
     return (
-      <Button
-        ariaLabel={false}
-        variant="outline"
-        size="medium"
-        id={getControlSetterButtonId(name, storyId)}
-        onClick={onForceVisible}
-        disabled={readonly}
-      >
+      <SetValueButton name={name} storyId={storyId} onClick={onForceVisible} disabled={readonly}>
         Set number
-      </Button>
+      </SetValueButton>
     );
   }
 
diff --git a/code/addons/docs/src/blocks/controls/Object.tsx b/code/addons/docs/src/blocks/controls/Object.tsx
index a724dfb9d0a7..5a5be06a6046 100644
--- a/code/addons/docs/src/blocks/controls/Object.tsx
+++ b/code/addons/docs/src/blocks/controls/Object.tsx
@@ -8,7 +8,7 @@ import { AddIcon, EditIcon, SubtractIcon } from '@storybook/icons';
 import { cloneDeep } from 'es-toolkit/object';
 import { styled, useTheme } from 'storybook/theming';
 
-import { getControlId, getControlSetterButtonId } from './helpers';
+import { getControlId, SetValueButton } from './helpers';
 import { JsonTree } from './react-editable-json-tree';
 import type { ControlProps, ObjectConfig, ObjectValue } from './types';
 
@@ -205,14 +205,9 @@ export const ObjectControl: FC<ObjectProps> = ({ name, storyId, value, onChange,
 
   if (!hasData) {
     return (
-      <Button
-        ariaLabel={false}
-        disabled={readonly}
-        id={getControlSetterButtonId(name, storyId)}
-        onClick={onForceVisible}
-      >
+      <SetValueButton name={name} storyId={storyId} onClick={onForceVisible} disabled={readonly}>
         Set object
-      </Button>
+      </SetValueButton>
     );
   }
 
diff --git a/code/addons/docs/src/blocks/controls/Text.tsx b/code/addons/docs/src/blocks/controls/Text.tsx
index 4723e9e5de68..0c8919b54545 100644
--- a/code/addons/docs/src/blocks/controls/Text.tsx
+++ b/code/addons/docs/src/blocks/controls/Text.tsx
@@ -1,11 +1,11 @@
 import type { ChangeEvent, FC } from 'react';
 import React, { useCallback, useState } from 'react';
 
-import { Button, Form } from 'storybook/internal/components';
+import { Form } from 'storybook/internal/components';
 
 import { styled } from 'storybook/theming';
 
-import { getControlId, getControlSetterButtonId } from './helpers';
+import { getControlId, SetValueButton } from './helpers';
 import type { ControlProps, TextConfig, TextValue } from './types';
 
 export type TextProps = ControlProps<TextValue | undefined> & TextConfig;
@@ -45,16 +45,9 @@ export const TextControl: FC<TextProps> = ({
 
   if (value === undefined) {
     return (
-      <Button
-        ariaLabel={false}
-        variant="outline"
-        size="medium"
-        disabled={readonly}
-        id={getControlSetterButtonId(name, storyId)}
-        onClick={onForceVisible}
-      >
+      <SetValueButton name={name} storyId={storyId} onClick={onForceVisible} disabled={readonly}>
         Set string
-      </Button>
+      </SetValueButton>
     );
   }
 
diff --git a/code/addons/docs/src/blocks/controls/helpers.test.ts b/code/addons/docs/src/blocks/controls/helpers.test.ts
index b5661e024238..9f4ad5562c4a 100644
--- a/code/addons/docs/src/blocks/controls/helpers.test.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.test.ts
@@ -1,3 +1,5 @@
+// @vitest-environment happy-dom
+
 import { describe, expect, it } from 'vitest';
 
 import { getControlId, getControlSetterButtonId } from './helpers';
diff --git a/code/addons/docs/src/blocks/controls/helpers.ts b/code/addons/docs/src/blocks/controls/helpers.tsx
similarity index 62%
rename from code/addons/docs/src/blocks/controls/helpers.ts
rename to code/addons/docs/src/blocks/controls/helpers.tsx
index b9895c7eb293..9ad558c55320 100644
--- a/code/addons/docs/src/blocks/controls/helpers.ts
+++ b/code/addons/docs/src/blocks/controls/helpers.tsx
@@ -1,3 +1,8 @@
+import type { FC, ReactNode } from 'react';
+import React from 'react';
+
+import { Button } from 'storybook/internal/components';
+
 /**
  * Adds `control` prefix to make ID attribute more specific. Removes spaces because spaces are not
  * allowed in ID attributes
@@ -31,3 +36,30 @@ export const getControlSetterButtonId = (value: string, storyId?: string) => {
   const base = value.replace(/\s+/g, '-');
   return storyId ? `set-${storyId}-${base}` : `set-${base}`;
 };
+
+interface SetValueButtonProps {
+  name: string;
+  storyId?: string;
+  children: ReactNode;
+  onClick: () => void;
+  disabled?: boolean;
+}
+
+export const SetValueButton: FC<SetValueButtonProps> = ({
+  name,
+  storyId,
+  children,
+  onClick,
+  disabled,
+}) => (
+  <Button
+    ariaLabel={false}
+    variant="outline"
+    size="medium"
+    id={getControlSetterButtonId(name, storyId)}
+    onClick={onClick}
+    disabled={disabled}
+  >
+    {children}
+  </Button>
+);