diff --git a/.changeset/cuddly-rules-taste.md b/.changeset/cuddly-rules-taste.md
new file mode 100644
index 00000000000..26d35b61477
--- /dev/null
+++ b/.changeset/cuddly-rules-taste.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+update types for button extensions
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index ab7cc7c1867..4aef1c765c1 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -10,6 +10,7 @@ import {ActionListGroupProps, GroupContext} from './Group'
 import {ActionListProps, ListContext} from './List'
 import {Selection} from './Selection'
 import {ActionListItemProps, Slots, TEXT_ROW_HEIGHT, getVariantStyles} from './shared'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 const LiBox = styled.li<SxProp>(sx)
 
@@ -21,7 +22,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       selected = undefined,
       active = false,
       onSelect,
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       id,
       role,
       _PrivateItemWrapper,
diff --git a/src/ActionList/List.tsx b/src/ActionList/List.tsx
index af89165ce7f..29bc2f54953 100644
--- a/src/ActionList/List.tsx
+++ b/src/ActionList/List.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import sx, {SxProp, merge} from '../sx'
 import {AriaRole} from '../utils/types'
 import {ActionListContainerContext} from './ActionListContainerContext'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type ActionListProps = React.PropsWithChildren<{
   /**
@@ -32,7 +33,7 @@ const ListBox = styled.ul<SxProp>(sx)
 
 export const List = React.forwardRef<HTMLUListElement, ActionListProps>(
   (
-    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = {}, ...props},
+    {variant = 'inset', selectionVariant, showDividers = false, role, sx: sxProp = defaultSxProp, ...props},
     forwardedRef,
   ): JSX.Element => {
     const styles = {
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index d36ce4dcf9c..4409a07d988 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -8,6 +8,7 @@ import {ActionListContainerContext} from './ActionList/ActionListContainerContex
 import {Button, ButtonProps} from './Button'
 import {useId} from './hooks/useId'
 import {MandateProps} from './utils/types'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
 
 export type MenuContextProps = Pick<
   AnchoredOverlayProps,
@@ -67,21 +68,19 @@ const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
 }
 
 export type ActionMenuAnchorProps = {children: React.ReactElement}
-const Anchor = React.forwardRef<AnchoredOverlayProps['anchorRef'], ActionMenuAnchorProps>(
-  ({children, ...anchorProps}, anchorRef) => {
-    return React.cloneElement(children, {...anchorProps, ref: anchorRef})
-  },
-)
+const Anchor = React.forwardRef<HTMLElement, ActionMenuAnchorProps>(({children, ...anchorProps}, anchorRef) => {
+  return React.cloneElement(children, {...anchorProps, ref: anchorRef})
+})
 
 /** this component is syntactical sugar 🍭 */
 export type ActionMenuButtonProps = ButtonProps
-const MenuButton = React.forwardRef<AnchoredOverlayProps['anchorRef'], ButtonProps>(({...props}, anchorRef) => {
+const MenuButton = React.forwardRef((props, anchorRef) => {
   return (
     <Anchor ref={anchorRef}>
       <Button type="button" trailingAction={TriangleDownIcon} {...props} />
     </Anchor>
   )
-})
+}) as PolymorphicForwardRefComponent<'button', ActionMenuButtonProps>
 
 type MenuOverlayProps = Partial<OverlayProps> &
   Pick<AnchoredOverlayProps, 'align'> & {
diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx
index 1b974f0a8e1..97d2961fe51 100644
--- a/src/Button/Button.tsx
+++ b/src/Button/Button.tsx
@@ -3,16 +3,13 @@ import {ButtonProps} from './types'
 import {ButtonBase} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 
-const ButtonComponent: PolymorphicForwardRefComponent<'button', ButtonProps> = forwardRef<
-  HTMLButtonElement,
-  ButtonProps
->(({children, ...props}, forwardedRef): JSX.Element => {
+const ButtonComponent = forwardRef(({children, ...props}, forwardedRef): JSX.Element => {
   return (
     <ButtonBase ref={forwardedRef} as="button" {...props}>
       {children}
     </ButtonBase>
   )
-})
+}) as PolymorphicForwardRefComponent<'button', ButtonProps>
 
 ButtonComponent.displayName = 'Button'
 
diff --git a/src/Button/ButtonBase.tsx b/src/Button/ButtonBase.tsx
index f31fffa79e4..d6d70870a6d 100644
--- a/src/Button/ButtonBase.tsx
+++ b/src/Button/ButtonBase.tsx
@@ -1,15 +1,14 @@
 import React, {ComponentPropsWithRef, forwardRef, useMemo} from 'react'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import Box from '../Box'
-import {merge, SxProp} from '../sx'
+import {BetterSystemStyleObject, merge} from '../sx'
 import {useTheme} from '../ThemeProvider'
 import {ButtonProps, StyledButton} from './types'
 import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
 import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
-declare let __DEV__: boolean
+import {defaultSxProp} from '../utils/defaultSxProp'
 
-const defaultSxProp = {}
-const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
+const ButtonBase = forwardRef(
   ({children, as: Component = 'button', sx: sxProp = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
     const {
       leadingIcon: LeadingIcon,
@@ -22,7 +21,7 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
       ...rest
     } = props
 
-    const innerRef = React.useRef<HTMLElement>(null)
+    const innerRef = React.useRef<HTMLButtonElement>(null)
     useRefObjectAsForwardedRef(forwardedRef, innerRef)
 
     const {theme} = useTheme()
@@ -30,7 +29,7 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
       return merge.all([getButtonStyles(theme), getVariantStyles(variant, theme)])
     }, [theme, variant])
     const sxStyles = useMemo(() => {
-      return merge(baseStyles, sxProp as SxProp)
+      return merge<BetterSystemStyleObject>(baseStyles, sxProp)
     }, [baseStyles, sxProp])
     const iconWrapStyles = {
       display: 'flex',
@@ -46,7 +45,10 @@ const ButtonBase = forwardRef<HTMLElement, ButtonProps>(
        */
       // eslint-disable-next-line react-hooks/rules-of-hooks
       React.useEffect(() => {
-        if (!(innerRef.current instanceof HTMLButtonElement) && !(innerRef.current instanceof HTMLAnchorElement)) {
+        if (
+          !(innerRef.current instanceof HTMLButtonElement) &&
+          !((innerRef.current as unknown) instanceof HTMLAnchorElement)
+        ) {
           // eslint-disable-next-line no-console
           console.warn('This component should be an instanceof a semantic button or anchor')
         }
diff --git a/src/Button/ButtonCounter.tsx b/src/Button/ButtonCounter.tsx
index bc386530d08..9afc381a6a8 100644
--- a/src/Button/ButtonCounter.tsx
+++ b/src/Button/ButtonCounter.tsx
@@ -1,12 +1,13 @@
 import React from 'react'
 import {SxProp} from '../sx'
 import CounterLabel from '../CounterLabel'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type CounterProps = {
   children: number
 } & SxProp
 
-const Counter = ({children, sx: sxProp = {}, ...props}: CounterProps) => {
+const Counter = ({children, sx: sxProp = defaultSxProp, ...props}: CounterProps) => {
   return (
     <CounterLabel data-component="ButtonCounter" sx={{ml: 2, ...sxProp}} {...props}>
       {children}
diff --git a/src/Button/IconButton.stories.tsx b/src/Button/IconButton.stories.tsx
index 4418fac7ffc..3dbeed2c2ac 100644
--- a/src/Button/IconButton.stories.tsx
+++ b/src/Button/IconButton.stories.tsx
@@ -1,10 +1,10 @@
-import React from 'react'
+import React, {ComponentProps} from 'react'
 import {EyeClosedIcon, EyeIcon, SearchIcon, XIcon, HeartIcon} from '@primer/octicons-react'
 import {Story, Meta} from '@storybook/react'
 import {IconButton} from '.'
 import {OcticonArgType} from '../utils/story-helpers'
 
-export default {
+const meta: Meta<ComponentProps<typeof IconButton>> = {
   title: 'Components/IconButton',
   argTypes: {
     size: {
@@ -33,6 +33,8 @@ export default {
     'aria-label': 'Icon button description',
     icon: XIcon,
   },
-} as Meta<typeof IconButton>
+}
 
-export const Playground: Story<typeof IconButton> = args => <IconButton {...args} />
+export default meta
+
+export const Playground: Story<ComponentProps<typeof IconButton>> = args => <IconButton {...args} />
diff --git a/src/Button/IconButton.tsx b/src/Button/IconButton.tsx
index b10e17e47e2..c3c53ea78e8 100644
--- a/src/Button/IconButton.tsx
+++ b/src/Button/IconButton.tsx
@@ -1,18 +1,27 @@
 import React, {forwardRef} from 'react'
-import {merge, SxProp} from '../sx'
+import {merge, BetterSystemStyleObject} from '../sx'
 import {useTheme} from '../ThemeProvider'
 import {IconButtonProps, StyledButton} from './types'
 import {getBaseStyles, getVariantStyles} from './styles'
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>((props, forwardedRef): JSX.Element => {
-  const {variant = 'default', size = 'medium', sx: sxProp = {}, icon: Icon, ...rest} = props
+const IconButton = forwardRef((props, forwardedRef): JSX.Element => {
+  const {variant = 'default', size = 'medium', sx: sxProp = defaultSxProp, icon: Icon, ...rest} = props
   const {theme} = useTheme()
-  const sxStyles = merge.all([getBaseStyles(theme), getVariantStyles(variant, theme), sxProp as SxProp])
+  const sxStyles = merge.all<BetterSystemStyleObject>([getBaseStyles(theme), getVariantStyles(variant, theme), sxProp])
   return (
-    <StyledButton data-component="IconButton" data-size={size} sx={sxStyles} {...rest} ref={forwardedRef}>
+    <StyledButton
+      data-component="IconButton"
+      data-size={size}
+      sx={sxStyles}
+      {...rest}
+      // @ts-expect-error StyledButton wants both Anchor and Button refs
+      ref={forwardedRef}
+    >
       <Icon />
     </StyledButton>
   )
-})
+}) as PolymorphicForwardRefComponent<'button' | 'a', IconButtonProps>
 
 export {IconButton}
diff --git a/src/Button/LinkButton.tsx b/src/Button/LinkButton.tsx
index 81afb134a4c..dd9baa0f51a 100644
--- a/src/Button/LinkButton.tsx
+++ b/src/Button/LinkButton.tsx
@@ -1,20 +1,27 @@
 import React, {forwardRef} from 'react'
-import {merge, SxProp} from '../sx'
+import {BetterSystemStyleObject, merge} from '../sx'
 import {LinkButtonProps} from './types'
 import {ButtonBase, ButtonBaseProps} from './ButtonBase'
 import {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 type MyProps = LinkButtonProps & ButtonBaseProps
 
-const LinkButton = forwardRef<HTMLElement, MyProps>(
-  ({children, as: Component = 'a', sx = {}, ...props}, forwardedRef): JSX.Element => {
-    const sxStyle = merge.all([sx as SxProp])
+const LinkButton = forwardRef(
+  ({children, as: Component = 'a', sx = defaultSxProp, ...props}, forwardedRef): JSX.Element => {
+    const sxStyle = merge.all<BetterSystemStyleObject>([sx])
     return (
-      <ButtonBase as={Component} ref={forwardedRef} sx={sxStyle} {...props}>
+      <ButtonBase
+        as={Component}
+        // @ts-expect-error ButtonBase wants both Anchor and Button refs
+        ref={forwardedRef}
+        sx={sxStyle}
+        {...props}
+      >
         {children}
       </ButtonBase>
     )
   },
-) as PolymorphicForwardRefComponent<'a', ButtonBaseProps>
+) as PolymorphicForwardRefComponent<'a', MyProps>
 
 export {LinkButton}
diff --git a/src/Button/types.ts b/src/Button/types.ts
index f746de8b775..f2ef172397c 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -1,6 +1,5 @@
-import React, {ComponentPropsWithRef} from 'react'
+import React from 'react'
 import styled from 'styled-components'
-import {IconProps} from '@primer/octicons-react'
 import sx, {SxProp} from '../sx'
 import getGlobalFocusStyles from '../_getGlobalFocusStyles'
 
@@ -15,14 +14,9 @@ export type Size = 'small' | 'medium' | 'large'
 
 export type AlignContent = 'start' | 'center'
 
-/**
- * Remove styled-components polymorphic as prop, which conflicts with radix's
- */
-type StyledButtonProps = Omit<ComponentPropsWithRef<typeof StyledButton>, 'as'>
-
 type ButtonA11yProps =
-  | {'aria-label': string; 'aria-labelledby'?: never}
-  | {'aria-label'?: never; 'aria-labelledby': string}
+  | {'aria-label': string; 'aria-labelledby'?: undefined}
+  | {'aria-label'?: undefined; 'aria-labelledby': string}
 
 export type ButtonBaseProps = {
   /**
@@ -42,22 +36,21 @@ export type ButtonBaseProps = {
    */
   block?: boolean
 } & SxProp &
-  React.ButtonHTMLAttributes<HTMLButtonElement> &
-  StyledButtonProps
+  React.ButtonHTMLAttributes<HTMLButtonElement>
 
 export type ButtonProps = {
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  leadingIcon?: React.ComponentType | null | undefined
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  trailingIcon?: React.ComponentType | null | undefined
   /**
    * Trailing action appears to the right of the trailing visual and is always locked to the end
    */
-  trailingAction?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
+  trailingAction?: React.ComponentType | null | undefined
   children: React.ReactNode
   /**
    * Content alignment for when visuals are present
@@ -66,8 +59,8 @@ export type ButtonProps = {
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
-  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>>
-} & ButtonBaseProps
+  icon: React.ComponentType
+} & Omit<ButtonBaseProps, 'aria-label' | 'aria-labelledby'>
 
 // adopted from React.AnchorHTMLAttributes
 export type LinkButtonProps = {
diff --git a/src/NavList/NavList.tsx b/src/NavList/NavList.tsx
index 11a500e8004..cd06a1db8b9 100644
--- a/src/NavList/NavList.tsx
+++ b/src/NavList/NavList.tsx
@@ -11,6 +11,7 @@ import {
 import Box from '../Box'
 import StyledOcticon from '../StyledOcticon'
 import sx, {merge, SxProp} from '../sx'
+import {defaultSxProp} from '../utils/defaultSxProp'
 import {useId} from '../hooks/useId'
 
 // ----------------------------------------------------------------------------
@@ -43,7 +44,7 @@ export type NavListItemProps = {
 } & SxProp
 
 const Item = React.forwardRef<HTMLAnchorElement, NavListItemProps>(
-  ({'aria-current': ariaCurrent, children, sx: sxProp = {}, ...props}, ref) => {
+  ({'aria-current': ariaCurrent, children, sx: sxProp = defaultSxProp, ...props}, ref) => {
     const {depth} = React.useContext(SubNavContext)
 
     // Get SubNav from children
@@ -102,7 +103,7 @@ const ItemWithSubNavContext = React.createContext<{buttonId: string; subNavId: s
 
 // TODO: ref prop
 // TODO: Animate open/close transition
-function ItemWithSubNav({children, subNav, sx: sxProp = {}}: ItemWithSubNavProps) {
+function ItemWithSubNav({children, subNav, sx: sxProp = defaultSxProp}: ItemWithSubNavProps) {
   const buttonId = useId()
   const subNavId = useId()
   const [isOpen, setIsOpen] = React.useState(false)
@@ -167,7 +168,7 @@ const SubNavContext = React.createContext<{depth: number}>({depth: 0})
 
 // TODO: ref prop
 // NOTE: SubNav must be a direct child of an Item
-const SubNav = ({children, sx: sxProp = {}}: NavListSubNavProps) => {
+const SubNav = ({children, sx: sxProp = defaultSxProp}: NavListSubNavProps) => {
   const {buttonId, subNavId, isOpen} = React.useContext(ItemWithSubNavContext)
   const {depth} = React.useContext(SubNavContext)
 
diff --git a/src/PageHeader/PageHeader.stories.tsx b/src/PageHeader/PageHeader.stories.tsx
index c781473185d..63db45e443d 100644
--- a/src/PageHeader/PageHeader.stories.tsx
+++ b/src/PageHeader/PageHeader.stories.tsx
@@ -217,7 +217,7 @@ const Template: Story = args => (
         }}
       >
         <PageHeader.LeadingAction hidden={!args.hasLeadingAction}>
-          <IconButton icon={SidebarExpandIcon} variant="invisible" />{' '}
+          <IconButton aria-label="Expand" icon={SidebarExpandIcon} variant="invisible" />{' '}
         </PageHeader.LeadingAction>
         <PageHeader.LeadingVisual hidden={!args.hasLeadingVisual}>{<args.LeadingVisual />}</PageHeader.LeadingVisual>
         <PageHeader.Title as={args['Title.as']} hidden={!args.hasTitle}>
@@ -227,7 +227,7 @@ const Template: Story = args => (
           <Label>Beta</Label>
         </PageHeader.TrailingVisual>
         <PageHeader.TrailingAction hidden={!args.hasTrailingAction}>
-          <IconButton icon={PencilIcon} variant="invisible" />
+          <IconButton aria-label="Edit" icon={PencilIcon} variant="invisible" />
         </PageHeader.TrailingAction>
         <PageHeader.Actions hidden={!args.hasActions}>
           <Hidden on={['narrow']}>
diff --git a/src/PageHeader/PageHeader.test.tsx b/src/PageHeader/PageHeader.test.tsx
index 81d726637a2..696ea1416fb 100644
--- a/src/PageHeader/PageHeader.test.tsx
+++ b/src/PageHeader/PageHeader.test.tsx
@@ -91,11 +91,11 @@ describe('PageHeader', () => {
         <PageHeader.ContextArea>ContextArea</PageHeader.ContextArea>
         <PageHeader.TitleArea>
           <PageHeader.LeadingAction>
-            <IconButton data-testid="LeadingAction" icon={SidebarExpandIcon} variant="invisible" />
+            <IconButton aria-label="Expand" data-testid="LeadingAction" icon={SidebarExpandIcon} variant="invisible" />
           </PageHeader.LeadingAction>
           <PageHeader.Title>Title</PageHeader.Title>
           <PageHeader.TrailingAction>
-            <IconButton data-testid="TrailingAction" icon={PencilIcon} variant="invisible" />
+            <IconButton aria-label="edit" data-testid="TrailingAction" icon={PencilIcon} variant="invisible" />
           </PageHeader.TrailingAction>
         </PageHeader.TitleArea>
         <PageHeader.Description></PageHeader.Description>
@@ -129,7 +129,7 @@ describe('PageHeader', () => {
         <PageHeader.TitleArea variant="large">
           <PageHeader.LeadingAction>
             Leading Action
-            <IconButton icon={SidebarExpandIcon} variant="invisible" />
+            <IconButton aria-label="expand" icon={SidebarExpandIcon} variant="invisible" />
           </PageHeader.LeadingAction>
           <PageHeader.LeadingVisual>
             Leading Visual
@@ -138,7 +138,7 @@ describe('PageHeader', () => {
           <PageHeader.Title>Title</PageHeader.Title>
           <PageHeader.TrailingAction>
             Trailing Action
-            <IconButton icon={PencilIcon} variant="invisible" />
+            <IconButton aria-label="edit" icon={PencilIcon} variant="invisible" />
           </PageHeader.TrailingAction>
           <PageHeader.TrailingVisual>
             Trailing Visual
diff --git a/src/PageHeader/features.stories.tsx b/src/PageHeader/features.stories.tsx
index ccd9c89a351..70838961c95 100644
--- a/src/PageHeader/features.stories.tsx
+++ b/src/PageHeader/features.stories.tsx
@@ -69,7 +69,7 @@ export const TitleWithTrailingAction = () => (
         <PageHeader.Title>Primer Backlog</PageHeader.Title>
 
         <PageHeader.TrailingAction>
-          <IconButton icon={PencilIcon} variant="invisible" label="Rename Title" />
+          <IconButton icon={PencilIcon} variant="invisible" aria-label="Rename Title" />
         </PageHeader.TrailingAction>
         <PageHeader.Actions
           hidden={{
diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx
index 35bd5722bc6..ddbe0bd8b4e 100644
--- a/src/SegmentedControl/SegmentedControl.tsx
+++ b/src/SegmentedControl/SegmentedControl.tsx
@@ -8,6 +8,7 @@ import sx, {merge, SxProp} from '../sx'
 import {ResponsiveValue, useResponsiveValue} from '../hooks/useResponsiveValue'
 import {ViewportRangeKeys} from '../utils/types/ViewportRangeKeys'
 import styled from 'styled-components'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 type WidthOnlyViewportRangeKeys = Exclude<ViewportRangeKeys, 'narrowLandscape' | 'portrait' | 'landscape'>
 
@@ -51,7 +52,7 @@ const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   fullWidth,
   onChange,
   size,
-  sx: sxProp = {},
+  sx: sxProp = defaultSxProp,
   variant,
   ...rest
 }) => {
diff --git a/src/SegmentedControl/SegmentedControlButton.tsx b/src/SegmentedControl/SegmentedControlButton.tsx
index e695d118e9d..263b03edb97 100644
--- a/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/src/SegmentedControl/SegmentedControlButton.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import Box from '../Box'
 import sx, {merge, SxProp} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type SegmentedControlButtonProps = {
   /** The visible label rendered in the button */
@@ -25,7 +26,7 @@ const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlB
   children,
   leadingIcon: LeadingIcon,
   selected,
-  sx: sxProp = {},
+  sx: sxProp = defaultSxProp,
   ...rest
 }) => {
   const mergedSx = merge(getSegmentedControlListItemStyles(), sxProp as SxProp)
diff --git a/src/SegmentedControl/SegmentedControlIconButton.tsx b/src/SegmentedControl/SegmentedControlIconButton.tsx
index 9b0dd0b8536..3ba844b6f67 100644
--- a/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -5,6 +5,7 @@ import sx, {merge, SxProp} from '../sx'
 import {getSegmentedControlButtonStyles, getSegmentedControlListItemStyles} from './getSegmentedControlStyles'
 import Tooltip from '../Tooltip'
 import Box from '../Box'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
@@ -31,7 +32,7 @@ export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<Segmen
   'aria-label': ariaLabel,
   icon: Icon,
   selected,
-  sx: sxProp = {},
+  sx: sxProp = defaultSxProp,
   ...rest
 }) => {
   const mergedSx = merge(
diff --git a/src/TabNav.tsx b/src/TabNav.tsx
index 79b859d2518..d77f2aa4123 100644
--- a/src/TabNav.tsx
+++ b/src/TabNav.tsx
@@ -1,3 +1,4 @@
+import {ForwardRefComponent as PolymorphicForwardRefComponent} from './utils/polymorphic'
 import classnames from 'classnames'
 import {To} from 'history'
 import React, {useRef, useState} from 'react'
@@ -67,18 +68,19 @@ function TabNav({children, 'aria-label': ariaLabel, ...rest}: TabNavProps) {
   )
 }
 
-type StyledTabNavLinkProps = {
+export type TabNavLinkProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement> & {
   to?: To
   selected?: boolean
+  href?: string
 } & SxProp
 
-const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
+const TabNavLink = styled.a.attrs<TabNavLinkProps>(props => ({
   activeClassName: typeof props.to === 'string' ? 'selected' : '',
   className: classnames(ITEM_CLASS, props.selected && SELECTED_CLASS, props.className),
   role: 'tab',
   'aria-selected': !!props.selected,
   tabIndex: -1,
-}))<StyledTabNavLinkProps>`
+}))<TabNavLinkProps>`
   padding: 8px 12px;
   font-size: ${get('fontSizes.1')};
   line-height: 20px;
@@ -105,9 +107,8 @@ const TabNavLink = styled.a.attrs<StyledTabNavLinkProps>(props => ({
   }
 
   ${sx};
-`
+` as PolymorphicForwardRefComponent<'a', TabNavLinkProps>
 
 TabNavLink.displayName = 'TabNav.Link'
 
-export type TabNavLinkProps = ComponentProps<typeof TabNavLink>
 export default Object.assign(TabNav, {Link: TabNavLink})
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index c0423bcb2bc..b85191ffad9 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -1,6 +1,7 @@
 import React, {forwardRef, MouseEventHandler} from 'react'
 import Box from '../Box'
 import {merge, SxProp} from '../sx'
+import {defaultSxProp} from '../utils/defaultSxProp'
 import TokenBase, {defaultTokenSize, isTokenInteractive, TokenBaseProps} from './TokenBase'
 import RemoveTokenButton from './_RemoveTokenButton'
 import TokenTextContainer from './_TokenTextContainer'
@@ -39,7 +40,7 @@ const Token = forwardRef<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement
       hideRemoveButton,
       href,
       onClick,
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       ...rest
     } = props
     const hasMultipleActionTargets = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index 341e8dc5c31..2db11b07916 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -16,11 +16,12 @@ import {useOnEscapePress} from '../hooks/useOnEscapePress'
 import {useOnOutsideClick} from '../hooks/useOnOutsideClick'
 import {useId} from '../hooks/useId'
 import {ActionList} from '../ActionList'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 export type UnderlineNavProps = {
   'aria-label'?: React.AriaAttributes['aria-label']
   as?: React.ElementType
-  sx?: SxProp
+  sx?: SxProp['sx']
   // cariant and align are currently not in used. Keeping here until some design explorations are finalized.
   variant?: 'default' | 'small'
   align?: 'right'
@@ -134,7 +135,7 @@ export const UnderlineNav = forwardRef(
       as = 'nav',
       align,
       'aria-label': ariaLabel,
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       afterSelect,
       variant = 'default',
       loadingCounters = false,
diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx
index 3186d5ebdfa..919e34502bc 100644
--- a/src/UnderlineNav2/UnderlineNavItem.tsx
+++ b/src/UnderlineNav2/UnderlineNavItem.tsx
@@ -8,6 +8,7 @@ import CounterLabel from '../CounterLabel'
 import {getLinkStyles, wrapperStyles, iconWrapStyles, counterStyles} from './styles'
 import {LoadingCounter} from './LoadingCounter'
 import useLayoutEffect from '../utils/useIsomorphicLayoutEffect'
+import {defaultSxProp} from '../utils/defaultSxProp'
 
 // adopted from React.AnchorHTMLAttributes
 type LinkProps = {
@@ -53,7 +54,7 @@ export type UnderlineNavItemProps = {
 export const UnderlineNavItem = forwardRef(
   (
     {
-      sx: sxProp = {},
+      sx: sxProp = defaultSxProp,
       as: Component = 'a',
       href = '#',
       children,
diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx
index 85cbd7ac627..c19ac720ef9 100644
--- a/src/_TextInputInnerAction.tsx
+++ b/src/_TextInputInnerAction.tsx
@@ -88,9 +88,10 @@ const TextInputAction = forwardRef<HTMLButtonElement, TextInputActionProps>(
               variant={variant}
               type="button"
               icon={icon}
-              aria-label={ariaLabel}
               sx={sx}
               {...rest}
+              aria-label={ariaLabel as unknown as string}
+              aria-labelledby={undefined}
               ref={forwardedRef}
             />
           </Tooltip>
diff --git a/src/__tests__/ActionMenu.types.test.tsx b/src/__tests__/ActionMenu.types.test.tsx
new file mode 100644
index 00000000000..38e954a5754
--- /dev/null
+++ b/src/__tests__/ActionMenu.types.test.tsx
@@ -0,0 +1,20 @@
+import {ActionMenu} from '..'
+import React from 'react'
+
+export function actionButtonWithoutProps() {
+  //@ts-expect-error requires children
+  return <ActionMenu.Button />
+}
+
+export function actionButtonWithChildren() {
+  return <ActionMenu.Button>Click me!</ActionMenu.Button>
+}
+
+export function actionButtonWithOptionalProps() {
+  return <ActionMenu.Button size="small">Click me!</ActionMenu.Button>
+}
+
+export function actionButtonWithInvalidSize() {
+  //@ts-expect-error size must be one of the valid values
+  return <ActionMenu.Button size="some-unknownsize">Click me!</ActionMenu.Button>
+}
diff --git a/src/__tests__/Button.types.test.tsx b/src/__tests__/Button.types.test.tsx
index 5509e866d18..a58e486eb33 100644
--- a/src/__tests__/Button.types.test.tsx
+++ b/src/__tests__/Button.types.test.tsx
@@ -1,12 +1,13 @@
+import {StopIcon} from '@primer/octicons-react'
 import React, {useRef} from 'react'
-import {Button} from '../Button'
+import {Button, IconButton} from '../Button'
 
 export function shouldAcceptOnlyAChildProp() {
   return <Button>child</Button>
 }
 
 export function ShouldAcceptKnownButtonPropsAndDomProps() {
-  const buttonEl = useRef<HTMLButtonElement>()
+  const buttonEl = useRef<HTMLButtonElement | null>(null)
   return (
     <Button
       ref={buttonEl}
@@ -33,3 +34,37 @@ export function shouldNotAcceptOutlandishProps() {
   // @ts-expect-error system props should not be accepted
   return <Button anOutlandshPropThatShouldNotBeAllowedOnA={'Button'} />
 }
+
+export function iconButtonRequiredProps() {
+  return (
+    <>
+      <IconButton icon={StopIcon} aria-label="Stop icon" />
+      <IconButton icon={StopIcon} aria-labelledby="Stop icon" />
+    </>
+  )
+}
+
+export function iconButtonShouldNotHaveLabelAndLabelledBy() {
+  // @ts-expect-error aria-label and aria-labelledby should not be allowed together
+  return <IconButton icon={StopIcon} aria-label="Stop icon" aria-labelledby="Stop icon" />
+}
+
+export function iconButtonRequiresAnIcon() {
+  // @ts-expect-error icon is required
+  return <IconButton aria-label="Stop icon" />
+}
+
+export function iconButtonOptionalProps() {
+  return (
+    <>
+      <IconButton icon={StopIcon} aria-label="Stop icon" size="small" />
+      <IconButton icon={StopIcon} aria-label="Stop icon" variant="danger" />
+      <IconButton icon={StopIcon} aria-label="Stop icon" sx={{m: 1}} />
+    </>
+  )
+}
+
+export function iconButtonShouldNotAcceptOutlandishProps() {
+  // @ts-expect-error system props should not be accepted
+  return <Button icon={StopIcon} aria-label="Stop icon" anOutlandshPropThatShouldNotBeAllowedOnA={'Button'} />
+}
diff --git a/src/__tests__/TabNav.types.test.tsx b/src/__tests__/TabNav.types.test.tsx
index a0e3dd0b90a..f1f14d83fb4 100644
--- a/src/__tests__/TabNav.types.test.tsx
+++ b/src/__tests__/TabNav.types.test.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import TabNav from '../TabNav'
+import {Button} from '../Button'
 
 export function shouldAcceptCallWithNoProps() {
   return (
@@ -20,3 +21,11 @@ export function shouldNotAcceptSystemProps() {
     </>
   )
 }
+
+export function shouldAcceptButtonAsProps() {
+  return <TabNav.Link as={Button} />
+}
+
+export function shouldAcceptTabNavLinkprops() {
+  return <TabNav.Link to="to something" selected as={Button} />
+}
diff --git a/src/drafts/MarkdownEditor/_SavedReplies.tsx b/src/drafts/MarkdownEditor/_SavedReplies.tsx
index 38e5f959c59..d10b4b4ee5f 100644
--- a/src/drafts/MarkdownEditor/_SavedReplies.tsx
+++ b/src/drafts/MarkdownEditor/_SavedReplies.tsx
@@ -86,7 +86,14 @@ export const SavedRepliesButton = () => {
 
   return items ? (
     <SelectPanel
-      renderAnchor={props => <ToolbarButton {...props} icon={ReplyIcon} aria-label="Add saved reply (Ctrl + .)" />}
+      renderAnchor={props => (
+        <ToolbarButton
+          {...props}
+          icon={ReplyIcon}
+          aria-label="Add saved reply (Ctrl + .)"
+          aria-labelledby={undefined}
+        />
+      )}
       open={open}
       onOpenChange={setOpen}
       items={items}
diff --git a/src/drafts/MarkdownEditor/_ViewSwitch.tsx b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
index 34c4f757a63..324f5c4673a 100644
--- a/src/drafts/MarkdownEditor/_ViewSwitch.tsx
+++ b/src/drafts/MarkdownEditor/_ViewSwitch.tsx
@@ -45,7 +45,7 @@ export const ViewSwitch = ({selectedView, onViewSelect, onLoadPreview, disabled}
   return (
     <Box sx={{display: 'flex', flexDirection: 'row'}}>
       {condensed ? (
-        <IconButton {...sharedProps} disabled={disabled} icon={icon} label={label} />
+        <IconButton {...sharedProps} disabled={disabled} icon={icon} aria-label={label} />
       ) : (
         <Button {...sharedProps} leadingIcon={icon} disabled={disabled}>
           {label}
diff --git a/src/global.d.ts b/src/global.d.ts
new file mode 100644
index 00000000000..4781b52c003
--- /dev/null
+++ b/src/global.d.ts
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-var
+declare var __DEV__: boolean
diff --git a/src/hooks/useControllableState.ts b/src/hooks/useControllableState.ts
index c85f253f21a..de7dcb41896 100644
--- a/src/hooks/useControllableState.ts
+++ b/src/hooks/useControllableState.ts
@@ -1,5 +1,4 @@
 import React from 'react'
-declare let __DEV__: boolean
 
 type ControllableStateOptions<T> = {
   /**
diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx
index 975e7e13a27..7cd400623cc 100644
--- a/src/stories/ActionMenu/examples.stories.tsx
+++ b/src/stories/ActionMenu/examples.stories.tsx
@@ -294,7 +294,7 @@ export function MixedSelection(): JSX.Element {
       </p>
 
       <ActionMenu>
-        <ActionMenu.Button aria-label="Group by" leadingIcon={selectedOption && selectedOption.icon}>
+        <ActionMenu.Button aria-label="Group by" leadingIcon={selectedOption ? selectedOption.icon : undefined}>
           {selectedOption ? `Group by ${selectedOption.text}` : 'Group items by'}
         </ActionMenu.Button>
         <ActionMenu.Overlay width="medium">
diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index b0bf0b445cc..f40e78a9714 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -422,7 +422,7 @@ export function MemexViewOptionsMenu(): JSX.Element {
         </Text>
         <ActionMenu open={open} onOpenChange={setOpen}>
           <ActionMenu.Anchor aria-label="Open View options menu">
-            <IconButton icon={TriangleDownIcon} size="small" />
+            <IconButton icon={TriangleDownIcon} size="small" aria-label="Open View options menu" />
           </ActionMenu.Anchor>
 
           <ActionMenu.Overlay width="medium">
diff --git a/src/utils/defaultSxProp.tsx b/src/utils/defaultSxProp.tsx
new file mode 100644
index 00000000000..71f1e60c385
--- /dev/null
+++ b/src/utils/defaultSxProp.tsx
@@ -0,0 +1,5 @@
+import {BetterSystemStyleObject} from '../sx'
+
+export const defaultSxProp: Readonly<BetterSystemStyleObject> = __DEV__
+  ? Object.freeze<BetterSystemStyleObject>({})
+  : {}
diff --git a/src/utils/deprecate.tsx b/src/utils/deprecate.tsx
index 49c29205fa0..70a91ae298d 100644
--- a/src/utils/deprecate.tsx
+++ b/src/utils/deprecate.tsx
@@ -1,5 +1,4 @@
 import {useRef, useCallback} from 'react'
-declare let __DEV__: boolean
 
 type DeprecationType = {name: string; message: string; version: string}