diff --git a/.claude/rules/emcn-components.md b/.claude/rules/emcn-components.md
index f02ff3946e5..fd57ee5c00c 100644
--- a/.claude/rules/emcn-components.md
+++ b/.claude/rules/emcn-components.md
@@ -56,3 +56,17 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
diff --git a/.cursor/rules/emcn-components.mdc b/.cursor/rules/emcn-components.mdc
index 1ac5fc577f8..3f5cd1bf90e 100644
--- a/.cursor/rules/emcn-components.mdc
+++ b/.cursor/rules/emcn-components.mdc
@@ -57,3 +57,17 @@ Declare keyboard intent on the action-owning primitive; never add document-level
 - Use Radix UI primitives for accessibility. Export the component and its `variants` (when using CVA). Document with TSDoc + a usage example.
 
 Color tokens and icon-size conventions are canonical in `.claude/rules/sim-styling.md` — follow it rather than restating.
+
+
+## Ordinary Button action geometry
+
+`Button` retains its existing appearance variants. For square actions use `iconSize`:
+`compact` (24px on the spacing scale), `compact-fixed` (24px), `regular` (28px),
+`roomy` (32px), or `touch` (40px). These values follow the root spacing scale;
+only `compact-fixed` stays fixed when root text is enlarged.
+Use `{ base: 'touch', sm: 'regular' }` for mobile/desktop targets. These props own
+geometry only; colour, radius and SVG stroke continue to come from the selected
+`variant` and `size`. `iconPadding` explicitly overrides the zero-padding geometry.
+Use `shape='round'` for circular actions, or omit it to retain the current radius.
+`size='inline'` is a 20px-high action with caption typography and compact horizontal
+padding. Prefer these supported props to size, padding and radius overrides.
diff --git a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
index ceb2b0b709b..6ec4de4377e 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/find-bar/find-bar.tsx
@@ -129,7 +129,8 @@ export const FindBar = memo(function FindBar({
             type='button'
             variant='ghost'
             size='icon'
-            className='size-6 shrink-0'
+            iconSize='compact'
+            className='shrink-0'
             aria-label={showReplace ? 'Hide replace' : 'Show replace'}
             aria-expanded={showReplace}
             onClick={() => setShowReplace((visible) => !visible)}
@@ -179,7 +180,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Previous match'
           title='Previous match (Shift+Enter)'
           disabled={!navEnabled}
@@ -191,7 +193,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Next match'
           title='Next match (Enter)'
           disabled={!navEnabled}
@@ -203,7 +206,8 @@ export const FindBar = memo(function FindBar({
           type='button'
           variant='ghost'
           size='icon'
-          className='size-6 shrink-0'
+          iconSize='compact'
+          className='shrink-0'
           aria-label='Close find'
           title='Close (Esc)'
           onClick={onClose}
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.test.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.test.tsx
index 0f57c5c0551..e2aa9d94339 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.test.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.test.tsx
@@ -1,7 +1,7 @@
 /**
  * @vitest-environment jsdom
  */
-import { act, type ReactNode } from 'react'
+import { act, type ComponentProps, type ReactNode } from 'react'
 import { createRoot, type Root } from 'react-dom/client'
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
 
@@ -19,6 +19,11 @@ vi.mock('next/navigation', () => ({
 }))
 
 vi.mock('@sim/emcn', () => ({
+  Button: ({
+    variant,
+    iconSize,
+    ...props
+  }: ComponentProps<'button'> & { variant?: string; iconSize?: string }) => <button {...props} />,
   Check: () => null,
   Duplicate: () => null,
   Split: () => null,
diff --git a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
index 6207a1e247a..28780a945dd 100644
--- a/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/components/message-actions/message-actions.tsx
@@ -2,6 +2,7 @@
 
 import { memo, useEffect, useRef, useState } from 'react'
 import {
+  Button,
   Check,
   ChipModal,
   ChipModalBody,
@@ -27,8 +28,6 @@ import { useForkMothershipChat } from '@/hooks/queries/mothership-chats'
 import { useFolderStore } from '@/stores/folders/store'
 
 const ICON_CLASS = 'size-[14px]'
-const BUTTON_CLASS =
-  'flex size-[26px] items-center justify-center rounded-[6px] text-[var(--text-icon)] transition-colors hover-hover:bg-[var(--surface-hover)] focus-visible:outline-hidden'
 
 interface MessageActionsProps {
   content: string
@@ -162,14 +161,15 @@ export const MessageActions = memo(function MessageActions({
         {canCopyContent && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <button
+              <Button
                 type='button'
                 aria-label='Copy message'
                 onClick={copyToClipboard}
-                className={BUTTON_CLASS}
+                variant='quiet'
+                iconSize='compact-fixed'
               >
                 {copied ? <Check className={ICON_CLASS} /> : <Duplicate className={ICON_CLASS} />}
-              </button>
+              </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>
               {copied ? 'Copied message' : 'Copy message'}
@@ -180,27 +180,29 @@ export const MessageActions = memo(function MessageActions({
           <>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <button
+                <Button
                   type='button'
                   aria-label='Like'
                   onClick={() => handleFeedbackClick('up')}
-                  className={BUTTON_CLASS}
+                  variant='quiet'
+                  iconSize='compact-fixed'
                 >
                   <ThumbsUp className={ICON_CLASS} />
-                </button>
+                </Button>
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>Good response</Tooltip.Content>
             </Tooltip.Root>
             <Tooltip.Root>
               <Tooltip.Trigger asChild>
-                <button
+                <Button
                   type='button'
                   aria-label='Dislike'
                   onClick={() => handleFeedbackClick('down')}
-                  className={BUTTON_CLASS}
+                  variant='quiet'
+                  iconSize='compact-fixed'
                 >
                   <ThumbsDown className={ICON_CLASS} />
-                </button>
+                </Button>
               </Tooltip.Trigger>
               <Tooltip.Content side='top'>Bad response</Tooltip.Content>
             </Tooltip.Root>
@@ -209,15 +211,16 @@ export const MessageActions = memo(function MessageActions({
         {canFork && (
           <Tooltip.Root>
             <Tooltip.Trigger asChild>
-              <button
+              <Button
                 type='button'
                 aria-label='Fork in new chat'
                 onClick={handleFork}
                 disabled={forkChat.isPending}
-                className={cn(BUTTON_CLASS, forkChat.isPending && 'cursor-not-allowed opacity-50')}
+                variant='quiet'
+                iconSize='compact-fixed'
               >
                 <Split className={cn(ICON_CLASS, 'rotate-90')} />
-              </button>
+              </Button>
             </Tooltip.Trigger>
             <Tooltip.Content side='top'>Fork in new chat</Tooltip.Content>
           </Tooltip.Root>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
index a3f9e23198d..8313c2c549e 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-find-bar.tsx
@@ -106,7 +106,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Previous match'
               disabled={!result?.matches}
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={() => step('back')}
             >
               <ArrowUp className='size-[13px]' />
@@ -117,7 +118,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               size='sm'
               aria-label='Next match'
               disabled={!result?.matches}
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={() => step('forward')}
             >
               <ArrowDown className='size-[13px]' />
@@ -127,7 +129,8 @@ export function BrowserFindBar({ inputRef, onClose, scopeId }: BrowserFindBarPro
               variant='ghost-secondary'
               size='sm'
               aria-label='Close find bar'
-              className='size-[24px] shrink-0 p-0'
+              iconSize='compact-fixed'
+              className='shrink-0'
               onClick={dismiss}
             >
               <X className='size-[13px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
index 8d310f38b29..064baa45326 100644
--- a/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/logs/components/log-details/components/file-download/file-download.tsx
@@ -106,11 +106,7 @@ function FileCard({ file, isExecutionFile = false, workspaceId }: FileCardProps)
           {file.type}
           {file.version === undefined ? '' : ` · v${file.version}`}
         </span>
-        <Button
-          variant='ghost'
-          className='h-[20px]! px-1.5! py-0! text-xs'
-          onClick={handleDownload}
-        >
+        <Button variant='ghost' size='inline' onClick={handleDownload}>
           <Download className='mr-1 size-[10px]' />
           Download
         </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
index f15e2c82ef6..93f746d7c44 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/select-field/select-options-editor.tsx
@@ -79,7 +79,8 @@ export function SelectOptionsEditor({ options, onChange }: SelectOptionsEditorPr
             size='sm'
             onClick={() => remove(option.id)}
             iconPadding='sm'
-            className='size-7 shrink-0'
+            iconSize='regular'
+            className='shrink-0'
             aria-label={`Remove ${option.name || 'option'}`}
           >
             <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
index 8fe52025569..c005de9d781 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-filter/table-filter.tsx
@@ -383,7 +383,8 @@ const FilterRuleRow = memo(function FilterRuleRow({
         size='sm'
         onClick={() => onRemove(rule.id)}
         iconPadding='sm'
-        className='size-7 shrink-0'
+        iconSize='regular'
+        className='shrink-0'
         aria-label='Remove filter'
       >
         <X className='size-[12px]' />
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx
index fab52045ad8..477ab19c88b 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-primitives.tsx
@@ -72,11 +72,8 @@ export const AddRowButton = React.memo(function AddRowButton({
     <Button
       type='button'
       variant='ghost'
-      size='sm'
-      className={cn(
-        'h-[20px] gap-2 p-0 text-[var(--text-body)]',
-        blockedReason && 'cursor-not-allowed opacity-50'
-      )}
+      size='inline'
+      className={cn('gap-2', blockedReason && 'cursor-not-allowed opacity-50')}
       aria-disabled={blockedReason ? true : undefined}
       onClick={blockedReason ? undefined : onClick}
     >
diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
index 18b04cfd5b2..2c53382bf54 100644
--- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/workflow-sidebar/workflow-sidebar.tsx
@@ -730,7 +730,8 @@ export function WorkflowSidebarBody({
                                 'noopener,noreferrer'
                               )
                             }
-                            className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
+                            iconSize='compact-fixed'
+                            className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
                           >
                             <SquareArrowUpRight className='size-[12px]' />
                           </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
index c42c236d1c3..4bd3f1c6c00 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/action-bar/action-bar.tsx
@@ -36,7 +36,7 @@ import { useWorkflowStore } from '@/stores/workflows/workflow/store'
 const DEFAULT_DUPLICATE_OFFSET = { x: 50, y: 50 }
 
 const ACTION_BUTTON_STYLES = [
-  'size-[24px] rounded-md p-0',
+  'rounded-md',
   'border-none bg-transparent text-[var(--text-icon)]',
   'hover-hover:bg-[var(--surface-5)] hover-hover:text-[var(--text-primary)]!',
   'dark:hover-hover:bg-[var(--surface-4)]',
@@ -472,6 +472,7 @@ export const ActionBar = memo(
                       }
                       if (canRunBlock) handleRunFromBlockClick()
                     }}
+                    iconSize='compact-fixed'
                     className={cn(getActionButtonStyles('run'), isWorkflowRunning && 'group/run')}
                     disabled={!canStopWorkflow && !canRunBlock}
                   >
@@ -517,6 +518,7 @@ export const ActionBar = memo(
                         collaborativeBatchToggleBlockEnabled([blockId])
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('enabled')}
                     disabled={
                       isWorkflowRunning ||
@@ -553,6 +555,7 @@ export const ActionBar = memo(
                   <DropdownMenuTrigger asChild>
                     <Button
                       variant='ghost'
+                      iconSize='compact-fixed'
                       className={getActionButtonStyles('color')}
                       disabled={
                         isWorkflowRunning ||
@@ -618,6 +621,7 @@ export const ActionBar = memo(
                         collaborativeBatchToggleLocked([blockId])
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('lock')}
                     disabled={isWorkflowRunning || disabled || (isLocked && isParentLocked)}
                   >
@@ -650,6 +654,7 @@ export const ActionBar = memo(
                         handleDuplicateBlock()
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('duplicate')}
                     disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
                   >
@@ -682,6 +687,7 @@ export const ActionBar = memo(
                         )
                       }
                     }}
+                    iconSize='compact-fixed'
                     className={getActionButtonStyles('remove')}
                     disabled={
                       isWorkflowRunning ||
@@ -717,6 +723,7 @@ export const ActionBar = memo(
                       collaborativeBatchRemoveBlocks([blockId])
                     }
                   }}
+                  iconSize='compact-fixed'
                   className={getActionButtonStyles('delete')}
                   disabled={isWorkflowRunning || disabled || isLocked || isParentLocked}
                 >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
index 330a73b990b..e9ae9d5c8a3 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/file-upload/file-upload.tsx
@@ -212,7 +212,8 @@ function SingleFileSelector({
         aria-label='Remove file'
         type='button'
         variant='ghost'
-        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
+        iconSize='compact'
+        className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
         onClick={onClear}
         disabled={isDeleting}
       >
@@ -766,7 +767,8 @@ export function FileUpload({
           aria-label='Remove file'
           type='button'
           variant='ghost'
-          className='-translate-y-1/2 absolute top-1/2 right-[4px] size-6 p-0'
+          iconSize='compact'
+          className='-translate-y-1/2 absolute top-1/2 right-[4px]'
           onClick={(e) => handleRemoveFile(file, e)}
           disabled={isDeleting}
         >
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
index a3da0f3fa49..3dcdd9347b8 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/messages-input/messages-input.tsx
@@ -661,7 +661,8 @@ export function MessagesInput({
                               deleteMessage(index)
                             }}
                             disabled={disabled}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Delete message'
                           >
                             <Trash className='size-3' />
@@ -673,7 +674,8 @@ export function MessagesInput({
                               moveMessageUp(index)
                             }}
                             disabled={disabled || index === 0}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Move message up'
                           >
                             <ChevronUp className='size-3' />
@@ -685,7 +687,8 @@ export function MessagesInput({
                               moveMessageDown(index)
                             }}
                             disabled={disabled || index === currentMessages.length - 1}
-                            className='-my-1 -mr-1 size-6 p-0'
+                            iconSize='compact'
+                            className='-my-1 -mr-1'
                             aria-label='Move message down'
                           >
                             <ChevronDown className='size-3' />
@@ -699,7 +702,8 @@ export function MessagesInput({
                           addMessageAfter(index)
                         }}
                         disabled={disabled}
-                        className='-mr-1.5 -my-1 size-6 p-0'
+                        iconSize='compact'
+                        className='-mr-1.5 -my-1'
                         aria-label='Add message below'
                       >
                         <Plus className='size-3.5' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
index 3130bf0f9ca..720a511c18c 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/selector-combobox/selector-combobox.tsx
@@ -340,7 +340,8 @@ export function SelectorCombobox({
                 aria-label='Clear selection'
                 type='button'
                 variant='ghost'
-                className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10 size-6 p-0'
+                iconSize='compact'
+                className='-translate-y-1/2 absolute top-1/2 right-[28px] z-10'
                 onClick={handleClear}
               >
                 <X className='size-4 opacity-50 hover-hover:opacity-100' />
diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
index 8edfbb54b46..10e9b3ad76e 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx
@@ -611,7 +611,8 @@ export function Editor() {
                                   type='button'
                                   variant='ghost'
                                   onClick={handleOpenChildWorkflow}
-                                  className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
+                                  iconSize='compact-fixed'
+                                  className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
                                 >
                                   <SquareArrowUpRight className='size-[12px]' />
                                 </Button>
diff --git a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
index 4adfb95edd8..c7c6880bf90 100644
--- a/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/w/components/preview/components/preview-editor/preview-editor.tsx
@@ -1398,7 +1398,8 @@ function PreviewEditorContent({
                               type='button'
                               variant='ghost'
                               onClick={handleExpandChildWorkflow}
-                              className='absolute right-[6px] bottom-1.5 z-10 size-[24px] cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] p-0 hover-hover:bg-[var(--surface-4)]'
+                              iconSize='compact-fixed'
+                              className='absolute right-[6px] bottom-1.5 z-10 cursor-pointer border border-[var(--border)] bg-[var(--surface-2)] hover-hover:bg-[var(--surface-4)]'
                             >
                               {isExecutionMode && onDrillDown ? (
                                 <Expand className='size-[12px]' />
diff --git a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
index b24e402e274..e9717c2f7b9 100644
--- a/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
+++ b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
@@ -18,7 +18,8 @@ export const bulkActionButtonVariants = cva(
   }
 )
 
-export interface BulkActionButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+export interface BulkActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the icon action; tooltip content is supplied separately. */
   'aria-label': string
   /**
diff --git a/packages/emcn/src/components/button/button.test.tsx b/packages/emcn/src/components/button/button.test.tsx
new file mode 100644
index 00000000000..4c8cae79dc0
--- /dev/null
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -0,0 +1,151 @@
+/** @vitest-environment jsdom */
+/** biome-ignore assist/source/organizeImports: Preserve the documented core/external/UI import order. */
+import { act, createRef } from 'react'
+import { createRoot } from 'react-dom/client'
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, expect, it } from 'vitest'
+import { Button } from '@sim/emcn'
+
+function normalizeClasses(markup: string) {
+  return markup.replace(
+    /class="([^"]+)"/g,
+    (_, classes: string) => `class="${classes.split(/\s+/).sort().join(' ')}"`
+  )
+}
+
+/** The three existing Button treatments used by compact product actions. */
+const TREATMENTS = [
+  { size: undefined, variant: 'ghost' },
+  { size: 'sm', variant: 'ghost-secondary' },
+  { size: 'icon', variant: 'ghost' },
+] as const
+
+describe('Button iconSize', () => {
+  for (const [iconSize, previousClass] of [
+    ['compact', 'size-6 p-0'],
+    ['compact-fixed', 'size-[24px] p-0'],
+    ['regular', 'size-7 p-0'],
+    ['roomy', 'size-8 p-0'],
+    ['touch', 'size-10 p-0'],
+  ] as const) {
+    it.each(TREATMENTS)(
+      `preserves the ${iconSize} treatment with size=$size and variant=$variant`,
+      (treatment) => {
+        const icon = <svg className='size-[14px]' strokeWidth={1.55} aria-hidden='true' />
+        const before = renderToStaticMarkup(
+          <Button
+            {...treatment}
+            type='button'
+            aria-label='Previous match'
+            className={`${previousClass} shrink-0`}
+          >
+            {icon}
+          </Button>
+        )
+        const after = renderToStaticMarkup(
+          <Button
+            {...treatment}
+            type='button'
+            aria-label='Previous match'
+            iconSize={iconSize}
+            className='shrink-0'
+          >
+            {icon}
+          </Button>
+        )
+        expect(normalizeClasses(after)).toBe(normalizeClasses(before))
+      }
+    )
+  }
+
+  it('allows explicit padding and consumer width to take precedence', () => {
+    const markup = renderToStaticMarkup(
+      <Button iconSize='compact-fixed' iconPadding='sm' className='w-[40px]!' aria-label='Run' />
+    )
+    expect(markup).toContain('size-[24px]')
+    expect(markup).toContain('w-[40px]!')
+    expect(markup).toContain('p-1')
+    expect(markup).not.toContain('p-0')
+    expect(markup).not.toContain('iconSize')
+    expect(markup).not.toContain('iconPadding')
+  })
+})
+
+describe('Button shared action geometry', () => {
+  it('composes responsive geometry, explicit padding and round shape without changing icon treatment', () => {
+    const markup = renderToStaticMarkup(
+      <Button
+        variant='ghost'
+        size='icon'
+        iconSize={{ base: 'touch', sm: 'regular' }}
+        iconPadding='sm'
+        shape='round'
+        aria-label='Edit'
+      >
+        <svg strokeWidth={1.55} />
+      </Button>
+    )
+    expect(markup).toContain('size-10')
+    expect(markup).toContain('sm:size-7')
+    expect(markup).not.toContain('size-[20px]')
+    expect(markup).toContain('p-1')
+    expect(markup).not.toContain('p-0')
+    expect(markup).toContain('rounded-full')
+    expect(markup).not.toContain('rounded-sm')
+    expect(markup).toContain('[stroke-width:1.25]')
+    expect(markup).toContain('text-[var(--text-icon-muted)]')
+    expect(markup).not.toMatch(/(?:iconSize|iconPadding|shape)=/)
+  })
+
+  it('retains an inline caption size and supports a base-only responsive value', () => {
+    const inline = renderToStaticMarkup(<Button size='inline'>Generate</Button>)
+    expect(inline).toContain('h-[20px]')
+    expect(inline).toContain('text-caption')
+    expect(inline).toContain('px-1.5 py-0')
+    const baseOnly = renderToStaticMarkup(<Button iconSize={{ base: 'roomy' }} aria-label='Run' />)
+    expect(baseOnly).toContain('size-8')
+    expect(baseOnly).not.toContain('sm:size')
+  })
+
+  it('forwards refs and native focus, submission and disabled behavior with responsive sizing', () => {
+    const container = document.createElement('div')
+    document.body.appendChild(container)
+    const root = createRoot(container)
+    const ref = createRef<HTMLButtonElement>()
+    let submissions = 0
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    const render = (disabled: boolean) =>
+      act(() =>
+        root.render(
+          <form
+            onSubmit={(event) => {
+              event.preventDefault()
+              submissions++
+            }}
+          >
+            <Button
+              ref={ref}
+              type='submit'
+              iconSize={{ base: 'touch', sm: 'regular' }}
+              disabled={disabled}
+              aria-label='Apply'
+            />
+          </form>
+        )
+      )
+    try {
+      render(false)
+      ref.current?.focus()
+      expect(document.activeElement).toBe(ref.current)
+      act(() => ref.current?.click())
+      expect(submissions).toBe(1)
+      render(true)
+      act(() => ref.current?.click())
+      expect(submissions).toBe(1)
+      expect(ref.current?.disabled).toBe(true)
+    } finally {
+      act(() => root.unmount())
+      container.remove()
+    }
+  })
+})
diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx
index 4ad21bc4a37..cc93c956b25 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -49,6 +49,17 @@ const buttonVariants = cva(
         sm: 'px-1.5 py-1 text-[length:11px]',
         md: 'px-2 py-1.5 text-[length:12px]',
         icon: 'size-[20px] rounded-sm p-0 [&_svg]:[stroke-width:1.25]',
+        inline: 'h-[20px] px-1.5 py-0 text-caption',
+      },
+      iconSize: {
+        compact: 'size-6 p-0',
+        'compact-fixed': 'size-[24px] p-0',
+        regular: 'size-7 p-0',
+        roomy: 'size-8 p-0',
+        touch: 'size-10 p-0',
+      },
+      shape: {
+        round: 'rounded-full',
       },
       iconPadding: {
         sm: 'p-1',
@@ -72,9 +83,31 @@ const buttonVariants = cva(
   }
 )
 
+type ButtonIconSize = NonNullable<VariantProps<typeof buttonVariants>['iconSize']>
+
+const responsiveIconSizes = {
+  compact: 'sm:size-6',
+  'compact-fixed': 'sm:size-[24px]',
+  regular: 'sm:size-7',
+  roomy: 'sm:size-8',
+  touch: 'sm:size-10',
+} as const satisfies Record<ButtonIconSize, string>
+
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
+    Omit<VariantProps<typeof buttonVariants>, 'iconSize'> {
+  /**
+   * Square icon-action geometry without changing the selected size's typography,
+   * corner radius, icon stroke or color. `compact` follows the spacing scale
+   * (24px at the default root font size); `compact-fixed` stays at 24px.
+   * Regular, roomy and touch follow the spacing scale (28px, 32px and 40px
+   * at the default root font size). A responsive
+   * value changes geometry at the standard sm breakpoint. All remove padding;
+   * explicit iconPadding or className can override it.
+   * Omit to retain the selected size's geometry.
+   * @example <Button variant='ghost' iconSize='compact' aria-label='Remove'><X /></Button>
+   */
+  iconSize?: ButtonIconSize | { base: ButtonIconSize; sm?: ButtonIconSize } | null
   /**
    * Symmetric padding for icon actions whose content or layout determines their size.
    * Preserves the selected size's typography, corner radius and icon stroke.
@@ -85,11 +118,23 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconPadding, ...props }, ref) => {
+  ({ className, variant, size, iconSize, iconPadding, shape, ...props }, ref) => {
+    const baseIconSize = typeof iconSize === 'object' ? iconSize?.base : iconSize
+    const smIconSize = typeof iconSize === 'object' ? iconSize?.sm : undefined
     return (
       <button
         ref={ref}
-        className={cn(buttonVariants({ variant, size, iconPadding }), className)}
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            iconSize: baseIconSize,
+            iconPadding,
+            shape,
+          }),
+          smIconSize && responsiveIconSizes[smIconSize],
+          className
+        )}
         {...props}
       />
     )
diff --git a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
index 806f128a179..d10a9e27b1b 100644
--- a/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
+++ b/packages/emcn/src/components/composer-action-button/composer-action-button.tsx
@@ -26,7 +26,8 @@ export const composerActionButtonVariants = cva('rounded-full p-0', {
   defaultVariants: { size: 'md', active: true },
 })
 
-export interface ComposerActionButtonProps extends Omit<ButtonProps, 'variant' | 'size'> {
+export interface ComposerActionButtonProps
+  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize' | 'shape'> {
   /** Accessible name for the caller's icon action. */
   'aria-label': string
   /** 28px by default; `sm` retains compact chat's 22px geometry and hover treatment. */
diff --git a/packages/workflow-renderer/src/note/note-block-view.tsx b/packages/workflow-renderer/src/note/note-block-view.tsx
index d47a556d391..6b71def6fb5 100644
--- a/packages/workflow-renderer/src/note/note-block-view.tsx
+++ b/packages/workflow-renderer/src/note/note-block-view.tsx
@@ -1058,7 +1058,8 @@ export function NoteBlockView({
                       event.stopPropagation()
                       onExpandedChange(!isExpanded)
                     }}
-                    className='nodrag nopan nowheel pointer-events-none ml-1 size-[24px] shrink-0 rounded-md border-none bg-transparent p-0 text-current opacity-0 transition-[background-color,color,opacity,transform] duration-150 hover-hover:bg-current/10 hover-hover:opacity-100 active:scale-[0.96] group-hover:pointer-events-auto group-hover:opacity-70 group-data-[node-selected]:pointer-events-auto group-data-[node-selected]:opacity-70'
+                    iconSize='compact-fixed'
+                    className='nodrag nopan nowheel pointer-events-none ml-1 shrink-0 rounded-md border-none bg-transparent text-current opacity-0 transition-[background-color,color,opacity,transform] duration-150 hover-hover:bg-current/10 hover-hover:opacity-100 active:scale-[0.96] group-hover:pointer-events-auto group-hover:opacity-70 group-data-[node-selected]:pointer-events-auto group-data-[node-selected]:opacity-70'
                   >
                     <span className='relative size-[14px]'>
                       <Expand