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]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
index ed3ae9e2eb1..a694dc21271 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-downloads.tsx
@@ -3,7 +3,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react'
 import type { BrowserDownloadInfo } from '@sim/desktop-bridge'
 import {
-  Button,
   cn,
   DropdownMenu,
   DropdownMenuContent,
@@ -18,6 +17,7 @@ import {
   showBrowserDownloadInFolder,
   showBrowserDownloadsMenu,
 } from '@/lib/browser-agent/transport'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 
 /** Aggregate byte progress for the toolbar rail; unknown-size downloads are ignored. */
 export function aggregateDownloadPercent(downloads: BrowserDownloadInfo[]): number | null {
@@ -127,14 +127,11 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
       }}
     >
       <DropdownMenuTrigger asChild>
-        <Button
+        <BrowserToolbarButton
           ref={buttonRef}
-          type='button'
-          variant='ghost-secondary'
-          size='sm'
           aria-label={label}
           title={label}
-          className='relative size-[30px] shrink-0 overflow-hidden p-0'
+          className='relative overflow-hidden'
           onClick={() => setHasUnviewedCompletion(false)}
         >
           {hasActiveDownloads ? (
@@ -160,7 +157,7 @@ export function BrowserDownloads({ scopeId, open, requestOpen, onClose }: Browse
               />
             </span>
           )}
-        </Button>
+        </BrowserToolbarButton>
       </DropdownMenuTrigger>
       <DropdownMenuContent align='end' sideOffset={5} className='w-[320px]'>
         <DropdownMenuLabel>Downloads</DropdownMenuLabel>
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
index f3aa734a126..a7c82cf5069 100644
--- a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-session.tsx
@@ -16,7 +16,6 @@ import type {
   DesktopAppearanceTheme,
 } from '@sim/desktop-bridge'
 import {
-  Button,
   ChipConfirmModal,
   ChipInput,
   chipVariants,
@@ -82,6 +81,7 @@ import {
   useBrowserPanelOcclusion,
 } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-panel-occlusion'
 import { BrowserThemeNotice } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-theme-notice'
+import { BrowserToolbarButton } from '@/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button'
 import {
   buildOmniboxSuggestions,
   googleSearchUrl,
@@ -1034,38 +1034,26 @@ export function BrowserSession({
     <div ref={panelRef} className='flex h-full flex-col overflow-hidden'>
       <div className='relative shrink-0 border-[var(--border)] border-b bg-[var(--bg)]'>
         <div className='flex items-center gap-1 px-2.5 py-1.5'>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          <BrowserToolbarButton
             aria-label='Back'
             disabled={!pageState?.canGoBack}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('back', {}, scopeId)}
           >
             <ArrowLeft className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Forward'
             disabled={!pageState?.canGoForward}
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('forward', {}, scopeId)}
           >
             <ArrowRight className='size-[14px]' />
-          </Button>
-          <Button
-            type='button'
-            variant='ghost-secondary'
-            size='sm'
+          </BrowserToolbarButton>
+          <BrowserToolbarButton
             aria-label='Reload page'
-            className='size-[30px] shrink-0 p-0'
             onClick={() => sendBrowserPanelAction('reload', {}, scopeId)}
           >
             <RefreshCw className='size-[14px]' />
-          </Button>
+          </BrowserToolbarButton>
           {/* URL bar: Enter navigates the agent browser. */}
           <Popover
             open={suggestionsOpen}
@@ -1266,17 +1254,13 @@ export function BrowserSession({
               }}
             >
               <DropdownMenuTrigger asChild>
-                <Button
+                <BrowserToolbarButton
                   ref={fillButtonRef}
-                  type='button'
-                  variant='ghost-secondary'
-                  size='sm'
                   aria-label='Fill a saved password'
                   title='Fill a saved password'
-                  className='size-[30px] shrink-0 p-0'
                 >
                   <Key className='size-[14px]' />
-                </Button>
+                </BrowserToolbarButton>
               </DropdownMenuTrigger>
               <DropdownMenuContent align='end' sideOffset={5} className='w-[240px]'>
                 {fillOptions.map((credential) => (
diff --git a/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
new file mode 100644
index 00000000000..28c18eb1b40
--- /dev/null
+++ b/apps/sim/app/workspace/[workspaceId]/home/components/mothership-view/components/resource-content/components/browser-session/browser-toolbar-button.tsx
@@ -0,0 +1,27 @@
+import { type ComponentProps, forwardRef } from 'react'
+import { Button, cn } from '@sim/emcn'
+
+interface BrowserToolbarButtonProps
+  extends Omit<
+    ComponentProps<typeof Button>,
+    'variant' | 'size' | 'iconSize' | 'iconPadding' | 'type'
+  > {
+  'aria-label': string
+}
+
+/** Browser navigation and utility action; forwards menu-anchor refs and native events. */
+export const BrowserToolbarButton = forwardRef<HTMLButtonElement, BrowserToolbarButtonProps>(
+  ({ className, ...props }, ref) => (
+    <Button
+      {...props}
+      ref={ref}
+      type='button'
+      variant='ghost-secondary'
+      size='sm'
+      iconSize='regular'
+      className={cn('shrink-0', className)}
+    />
+  )
+)
+
+BrowserToolbarButton.displayName = 'BrowserToolbarButton'
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/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx b/packages/emcn/src/components/bulk-action-button/bulk-action-button.tsx
index 8088e98f093..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
@@ -19,7 +19,7 @@ export const bulkActionButtonVariants = cva(
 )
 
 export interface BulkActionButtonProps
-  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  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
index c0b4fc35df3..4c8cae79dc0 100644
--- a/packages/emcn/src/components/button/button.test.tsx
+++ b/packages/emcn/src/components/button/button.test.tsx
@@ -1,5 +1,7 @@
-/** @vitest-environment node */
+/** @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'
@@ -22,6 +24,9 @@ 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`,
@@ -65,3 +70,82 @@ describe('Button 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 bc2d2c6ef66..649c3524432 100644
--- a/packages/emcn/src/components/button/button.tsx
+++ b/packages/emcn/src/components/button/button.tsx
@@ -49,10 +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',
@@ -76,18 +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',
+} 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.
-   * Both remove padding; an explicit iconPadding or className can override it.
+   * 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?: VariantProps<typeof buttonVariants>['iconSize']
+  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.
@@ -98,11 +118,23 @@ export interface ButtonProps
 }
 
 const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, iconSize, 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, iconSize, 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 0a466fc0544..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
@@ -27,7 +27,7 @@ export const composerActionButtonVariants = cva('rounded-full p-0', {
 })
 
 export interface ComposerActionButtonProps
-  extends Omit<ButtonProps, 'variant' | 'size' | 'iconPadding' | 'iconSize'> {
+  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. */