diff --git a/src/components/disclosure/disclosure.test.tsx b/src/components/disclosure/disclosure.test.tsx
index a6528a2..6c72cff 100644
--- a/src/components/disclosure/disclosure.test.tsx
+++ b/src/components/disclosure/disclosure.test.tsx
@@ -20,7 +20,7 @@ jest.mock('../../hooks/use-id')
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
-  return new Promise(resolve => {
+  return new Promise<void>(resolve => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         resolve()
@@ -296,6 +296,66 @@ describe('Rendering', () => {
         assertDisclosurePanel({ state: DisclosureState.Visible })
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Disclosure>
+            <Disclosure.Button>Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Disclosure>
+            <Disclosure.Button type="submit">Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Disclosure>
+            <Disclosure.Button as={CustomButton}>Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Disclosure>
+            <Disclosure.Button as="div">Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Disclosure>
+            <Disclosure.Button as={CustomButton}>Trigger</Disclosure.Button>
+          </Disclosure>
+        )
+
+        expect(getDisclosureButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Disclosure.Panel', () => {
diff --git a/src/components/disclosure/disclosure.tsx b/src/components/disclosure/disclosure.tsx
index 9033ee6..8b73c5a 100644
--- a/src/components/disclosure/disclosure.tsx
+++ b/src/components/disclosure/disclosure.tsx
@@ -7,6 +7,7 @@ import React, {
   useEffect,
   useMemo,
   useReducer,
+  useRef,
 
   // Types
   Dispatch,
@@ -26,6 +27,7 @@ import { useId } from '../../hooks/use-id'
 import { Keys } from '../keyboard'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum DisclosureStates {
   Open,
@@ -226,7 +228,8 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   ref: Ref<HTMLButtonElement>
 ) {
   let [state, dispatch] = useDisclosureContext([Disclosure.name, Button.name].join('.'))
-  let buttonRef = useSyncRefs(ref)
+  let internalButtonRef = useRef<HTMLButtonElement | null>(null)
+  let buttonRef = useSyncRefs(internalButtonRef, ref)
 
   let panelContext = useDisclosurePanelContext()
   let isWithinPanel = panelContext === null ? false : panelContext === state.panelId
@@ -290,13 +293,14 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     [state]
   )
 
+  let type = useResolveButtonType(props, internalButtonRef)
   let passthroughProps = props
   let propsWeControl = isWithinPanel
-    ? { type: 'button', onKeyDown: handleKeyDown, onClick: handleClick }
+    ? { ref: buttonRef, type, onKeyDown: handleKeyDown, onClick: handleClick }
     : {
         ref: buttonRef,
         id: state.buttonId,
-        type: 'button',
+        type,
         'aria-expanded': props.disabled
           ? undefined
           : state.disclosureState === DisclosureStates.Open,
diff --git a/src/components/listbox/listbox.test.tsx b/src/components/listbox/listbox.test.tsx
index bb232a0..70b304c 100644
--- a/src/components/listbox/listbox.test.tsx
+++ b/src/components/listbox/listbox.test.tsx
@@ -326,6 +326,66 @@ describe('Rendering', () => {
         assertListboxButtonLinkedWithListboxLabel()
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button>Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button type="submit">Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button as={CustomButton}>Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button as="div">Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Listbox value={null} onChange={console.log}>
+            <Listbox.Button as={CustomButton}>Trigger</Listbox.Button>
+          </Listbox>
+        )
+
+        expect(getListboxButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Listbox.Options', () => {
diff --git a/src/components/listbox/listbox.tsx b/src/components/listbox/listbox.tsx
index 10b0e39..7fe3fb2 100644
--- a/src/components/listbox/listbox.tsx
+++ b/src/components/listbox/listbox.tsx
@@ -32,6 +32,7 @@ import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { isFocusableElement, FocusableMode } from '../../utils/focus-management'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum ListboxStates {
   Open,
@@ -370,7 +371,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   let propsWeControl = {
     ref: buttonRef,
     id,
-    type: 'button',
+    type: useResolveButtonType(props, state.buttonRef),
     'aria-haspopup': true,
     'aria-controls': state.optionsRef.current?.id,
     'aria-expanded': state.disabled ? undefined : state.listboxState === ListboxStates.Open,
diff --git a/src/components/menu/menu.test.tsx b/src/components/menu/menu.test.tsx
index 3f37c63..4bf3399 100644
--- a/src/components/menu/menu.test.tsx
+++ b/src/components/menu/menu.test.tsx
@@ -184,6 +184,65 @@ describe('Rendering', () => {
         assertMenu({ state: MenuState.Visible })
       })
     )
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Menu>
+            <Menu.Button>Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Menu>
+            <Menu.Button type="submit">Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Menu>
+            <Menu.Button as={CustomButton}>Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Menu>
+            <Menu.Button as="div">Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Menu>
+            <Menu.Button as={CustomButton}>Trigger</Menu.Button>
+          </Menu>
+        )
+
+        expect(getMenuButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Menu.Items', () => {
diff --git a/src/components/menu/menu.tsx b/src/components/menu/menu.tsx
index 99f3e49..1d51ca2 100644
--- a/src/components/menu/menu.tsx
+++ b/src/components/menu/menu.tsx
@@ -34,6 +34,7 @@ import { isFocusableElement, FocusableMode } from '../../utils/focus-management'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { useTreeWalker } from '../../hooks/use-tree-walker'
 import { useOpenClosed, State, OpenClosedProvider } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum MenuStates {
   Open,
@@ -294,7 +295,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
   let propsWeControl = {
     ref: buttonRef,
     id,
-    type: 'button',
+    type: useResolveButtonType(props, state.buttonRef),
     'aria-haspopup': true,
     'aria-controls': state.itemsRef.current?.id,
     'aria-expanded': props.disabled ? undefined : state.menuState === MenuStates.Open,
diff --git a/src/components/popover/popover.test.tsx b/src/components/popover/popover.test.tsx
index a5979ea..3df9c9b 100644
--- a/src/components/popover/popover.test.tsx
+++ b/src/components/popover/popover.test.tsx
@@ -23,7 +23,7 @@ jest.mock('../../hooks/use-id')
 afterAll(() => jest.restoreAllMocks())
 
 function nextFrame() {
-  return new Promise(resolve => {
+  return new Promise<void>(resolve => {
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
         resolve()
@@ -319,6 +319,66 @@ describe('Rendering', () => {
         assertPopoverPanel({ state: PopoverState.Visible })
       })
     )
+
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Popover>
+            <Popover.Button>Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Popover>
+            <Popover.Button type="submit">Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Popover>
+            <Popover.Button as={CustomButton}>Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Popover>
+            <Popover.Button as="div">Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Popover>
+            <Popover.Button as={CustomButton}>Trigger</Popover.Button>
+          </Popover>
+        )
+
+        expect(getPopoverButton()).not.toHaveAttribute('type')
+      })
+    })
   })
 
   describe('Popover.Panel', () => {
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 15bebf2..30c4a03 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -35,6 +35,7 @@ import {
 } from '../../utils/focus-management'
 import { useWindowEvent } from '../../hooks/use-window-event'
 import { OpenClosedProvider, State, useOpenClosed } from '../../internal/open-closed'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 enum PopoverStates {
   Open,
@@ -309,6 +310,7 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     ref,
     isWithinPanel ? null : button => dispatch({ type: ActionTypes.SetButton, button })
   )
+  let withinPanelButtonRef = useSyncRefs(internalButtonRef, ref)
 
   // TODO: Revisit when handling Tab/Shift+Tab when using Portal's
   let activeElementRef = useRef<Element | null>(null)
@@ -468,17 +470,19 @@ let Button = forwardRefWithAs(function Button<TTag extends ElementType = typeof
     [state]
   )
 
+  let type = useResolveButtonType(props, internalButtonRef)
   let passthroughProps = props
   let propsWeControl = isWithinPanel
     ? {
-        type: 'button',
+        ref: withinPanelButtonRef,
+        type,
         onKeyDown: handleKeyDown,
         onClick: handleClick,
       }
     : {
         ref: buttonRef,
         id: state.buttonId,
-        type: 'button',
+        type,
         'aria-expanded': props.disabled ? undefined : state.popoverState === PopoverStates.Open,
         'aria-controls': state.panel ? state.panelId : undefined,
         onKeyDown: handleKeyDown,
diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx
index 28d350d..d566a48 100644
--- a/src/components/switch/switch.test.tsx
+++ b/src/components/switch/switch.test.tsx
@@ -58,6 +58,66 @@ describe('Rendering', () => {
     )
     assertSwitch({ state: SwitchState.Off, label: 'Enable notifications' })
   })
+
+  describe('`type` attribute', () => {
+    it('should set the `type` to "button" by default', async () => {
+      render(
+        <Switch checked={false} onChange={console.log}>
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).toHaveAttribute('type', 'button')
+    })
+
+    it('should not set the `type` to "button" if it already contains a `type`', async () => {
+      render(
+        <Switch checked={false} onChange={console.log} type="submit">
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).toHaveAttribute('type', 'submit')
+    })
+
+    it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+      let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+        <button ref={ref} {...props} />
+      ))
+
+      render(
+        <Switch checked={false} onChange={console.log} as={CustomButton}>
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).toHaveAttribute('type', 'button')
+    })
+
+    it('should not set the type if the "as" prop is not a "button"', async () => {
+      render(
+        <Switch checked={false} onChange={console.log} as="div">
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).not.toHaveAttribute('type')
+    })
+
+    it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+      let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+        <div ref={ref} {...props} />
+      ))
+
+      render(
+        <Switch checked={false} onChange={console.log} as={CustomButton}>
+          Trigger
+        </Switch>
+      )
+
+      expect(getSwitch()).not.toHaveAttribute('type')
+    })
+  })
 })
 
 describe('Render composition', () => {
diff --git a/src/components/switch/switch.tsx b/src/components/switch/switch.tsx
index 99d60d5..a2a5ceb 100644
--- a/src/components/switch/switch.tsx
+++ b/src/components/switch/switch.tsx
@@ -10,6 +10,7 @@ import React, {
   ElementType,
   KeyboardEvent as ReactKeyboardEvent,
   MouseEvent as ReactMouseEvent,
+  useRef,
 } from 'react'
 
 import { Props } from '../../types'
@@ -19,6 +20,8 @@ import { Keys } from '../keyboard'
 import { isDisabledReactIssue7711 } from '../../utils/bugs'
 import { Label, useLabels } from '../label/label'
 import { Description, useDescriptions } from '../description/description'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
+import { useSyncRefs } from '../../hooks/use-sync-refs'
 
 interface StateDefinition {
   switch: HTMLButtonElement | null
@@ -90,6 +93,11 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
   let { checked, onChange, ...passThroughProps } = props
   let id = `headlessui-switch-${useId()}`
   let groupContext = useContext(GroupContext)
+  let internalSwitchRef = useRef<HTMLButtonElement | null>(null)
+  let switchRef = useSyncRefs(
+    internalSwitchRef,
+    groupContext === null ? null : groupContext.setSwitch
+  )
 
   let toggle = useCallback(() => onChange(!checked), [onChange, checked])
   let handleClick = useCallback(
@@ -117,8 +125,9 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
   let slot = useMemo<SwitchRenderPropArg>(() => ({ checked }), [checked])
   let propsWeControl = {
     id,
-    ref: groupContext === null ? undefined : groupContext.setSwitch,
+    ref: switchRef,
     role: 'switch',
+    type: useResolveButtonType(props, internalSwitchRef),
     tabIndex: 0,
     'aria-checked': checked,
     'aria-labelledby': groupContext?.labelledby,
@@ -128,10 +137,6 @@ export function Switch<TTag extends ElementType = typeof DEFAULT_SWITCH_TAG>(
     onKeyPress: handleKeyPress,
   }
 
-  if (passThroughProps.as === 'button') {
-    Object.assign(propsWeControl, { type: 'button' })
-  }
-
   return render({
     props: { ...passThroughProps, ...propsWeControl },
     slot,
diff --git a/src/components/tabs/tabs.test.tsx b/src/components/tabs/tabs.test.tsx
index c9214ab..2125583 100644
--- a/src/components/tabs/tabs.test.tsx
+++ b/src/components/tabs/tabs.test.tsx
@@ -416,6 +416,78 @@ describe('Rendering', () => {
       assertActiveElement(getByText('Tab 1'))
     })
   })
+
+  describe(`'Tab'`, () => {
+    describe('`type` attribute', () => {
+      it('should set the `type` to "button" by default', async () => {
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab>Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the `type` to "button" if it already contains a `type`', async () => {
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab type="submit">Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).toHaveAttribute('type', 'submit')
+      })
+
+      it('should set the `type` to "button" when using the `as` prop which resolves to a "button"', async () => {
+        let CustomButton = React.forwardRef<HTMLButtonElement>((props, ref) => (
+          <button ref={ref} {...props} />
+        ))
+
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab as={CustomButton}>Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).toHaveAttribute('type', 'button')
+      })
+
+      it('should not set the type if the "as" prop is not a "button"', async () => {
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab as="div">Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).not.toHaveAttribute('type')
+      })
+
+      it('should not set the `type` to "button" when using the `as` prop which resolves to a "div"', async () => {
+        let CustomButton = React.forwardRef<HTMLDivElement>((props, ref) => (
+          <div ref={ref} {...props} />
+        ))
+
+        render(
+          <Tab.Group>
+            <Tab.List>
+              <Tab as={CustomButton}>Trigger</Tab>
+            </Tab.List>
+          </Tab.Group>
+        )
+
+        expect(getTabs()[0]).not.toHaveAttribute('type')
+      })
+    })
+  })
 })
 
 describe('Keyboard interactions', () => {
diff --git a/src/components/tabs/tabs.tsx b/src/components/tabs/tabs.tsx
index d5c2e83..d90cfe3 100644
--- a/src/components/tabs/tabs.tsx
+++ b/src/components/tabs/tabs.tsx
@@ -24,6 +24,7 @@ import { Keys } from '../../components/keyboard'
 import { focusIn, Focus } from '../../utils/focus-management'
 import { useIsoMorphicEffect } from '../../hooks/use-iso-morphic-effect'
 import { useSyncRefs } from '../../hooks/use-sync-refs'
+import { useResolveButtonType } from '../../hooks/use-resolve-button-type'
 
 interface StateDefinition {
   selectedIndex: number | null
@@ -332,8 +333,6 @@ export function Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
     change(myIndex)
   }, [change, myIndex, internalTabRef])
 
-  let type = props?.type ?? (props.as || DEFAULT_TAB_TAG) === 'button' ? 'button' : undefined
-
   let slot = useMemo(() => ({ selected }), [selected])
   let propsWeControl = {
     ref: tabRef,
@@ -342,7 +341,7 @@ export function Tab<TTag extends ElementType = typeof DEFAULT_TAB_TAG>(
     onClick: handleSelection,
     id,
     role: 'tab',
-    type,
+    type: useResolveButtonType(props, internalTabRef),
     'aria-controls': panels[myIndex]?.current?.id,
     'aria-selected': selected,
     tabIndex: selected ? 0 : -1,
diff --git a/src/hooks/use-resolve-button-type.ts b/src/hooks/use-resolve-button-type.ts
new file mode 100644
index 0000000..f5a6cd2
--- /dev/null
+++ b/src/hooks/use-resolve-button-type.ts
@@ -0,0 +1,34 @@
+import { useState, MutableRefObject } from 'react'
+
+import { useIsoMorphicEffect } from './use-iso-morphic-effect'
+
+function resolveType<TTag>(props: { type?: string; as?: TTag }) {
+  if (props.type) return props.type
+
+  let tag = props.as ?? 'button'
+  if (typeof tag === 'string' && tag.toLowerCase() === 'button') return 'button'
+
+  return undefined
+}
+
+export function useResolveButtonType<TTag>(
+  props: { type?: string; as?: TTag },
+  ref: MutableRefObject<HTMLElement | null>
+) {
+  let [type, setType] = useState(() => resolveType(props))
+
+  useIsoMorphicEffect(() => {
+    setType(resolveType(props))
+  }, [props.type, props.as])
+
+  useIsoMorphicEffect(() => {
+    if (type) return
+    if (!ref.current) return
+
+    if (ref.current instanceof HTMLButtonElement && !ref.current.hasAttribute('type')) {
+      setType('button')
+    }
+  }, [type, ref])
+
+  return type
+}
diff --git a/src/hooks/use-sync-refs.ts b/src/hooks/use-sync-refs.ts
index 5a072c4..4d11eba 100644
--- a/src/hooks/use-sync-refs.ts
+++ b/src/hooks/use-sync-refs.ts
@@ -1,7 +1,7 @@
 import { useRef, useEffect, useCallback } from 'react'
 
 export function useSyncRefs<TType>(
-  ...refs: (React.MutableRefObject<TType> | ((instance: TType) => void) | null)[]
+  ...refs: (React.MutableRefObject<TType | null> | ((instance: TType) => void) | null)[]
 ) {
   let cache = useRef(refs)
 
diff --git a/src/test-utils/accessibility-assertions.ts b/src/test-utils/accessibility-assertions.ts
index 5a6fb38..6e434b3 100644
--- a/src/test-utils/accessibility-assertions.ts
+++ b/src/test-utils/accessibility-assertions.ts
@@ -7,7 +7,7 @@ function assertNever(x: never): never {
 // ---
 
 export function getMenuButton(): HTMLElement | null {
-  return document.querySelector('button,[role="button"]')
+  return document.querySelector('button,[role="button"],[id^="headlessui-menu-button-"]')
 }
 
 export function getMenuButtons(): HTMLElement[] {
@@ -226,7 +226,7 @@ export function getListboxLabel(): HTMLElement | null {
 }
 
 export function getListboxButton(): HTMLElement | null {
-  return document.querySelector('button,[role="button"]')
+  return document.querySelector('button,[role="button"],[id^="headlessui-listbox-button-"]')
 }
 
 export function getListboxButtons(): HTMLElement[] {