@mui/material 9.0.0-beta.0 → 9.0.0-beta.1

package/ButtonBase/useButtonBase.d.mts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+export interface UseButtonBaseParameters {
+  /**
+   * Whether the root should be treated as a native `<button>` for render-time semantics.
+   */
+  nativeButton: boolean;
+  /**
+   * The explicit `nativeButton` value provided by the caller, if any.
+   */
+  nativeButtonProp?: boolean | undefined;
+  /**
+   * Whether the default rendered element is expected to be a native button when
+   * `nativeButton` was not explicitly provided.
+   * @default nativeButton
+   */
+  internalNativeButton?: boolean | undefined;
+  /**
+   * Whether to perform additional checks in dev mode on whether the resolved element
+   * matches the default native or non-native button expectation.
+   * Set to `true` to allow hook callers bypass this check, e.g. when the `component`
+   * prop is a string.
+   * @default false
+   */
+  allowInferredHostMismatch?: boolean | undefined;
+  /**
+   * The disabled state of the component.
+   */
+  disabled: boolean;
+  /**
+   * The `type` attribute for the element.
+   */
+  type?: string | undefined;
+  /**
+   * Whether the element has a `formAction` attribute. When true, the hook
+   * will not default `type` to `'button'` for native buttons so the browser
+   * can use its natural submit behaviour.
+   * @default false
+   */
+  hasFormAction?: boolean | undefined;
+  /**
+   * The `tabIndex` attribute for the element.
+   * @default 0
+   */
+  tabIndex?: number | undefined;
+  /**
+   * When `true`, a disabled root can remain focusable.
+   * When `undefined`, the feature is not enabled.
+   */
+  focusableWhenDisabled?: boolean | undefined;
+  /**
+   * When `true`, calls `event.stopPropagation()` on click before the disabled guard runs.
+   * @default false
+   */
+  stopEventPropagation?: boolean | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyDown`, e.g.
+   * to trigger the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyUp`, e.g.
+   * to control the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+}
+export interface ButtonBaseButtonProps {
+  role?: string | undefined;
+  'aria-disabled'?: boolean | undefined;
+  type?: string | undefined;
+  disabled?: boolean | undefined;
+  tabIndex: number;
+}
+export interface ButtonBaseExternalProps extends React.HTMLAttributes<any> {
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
+  type?: string | undefined;
+}
+export interface ButtonBaseEventHandlers {
+  onClick: React.MouseEventHandler<HTMLElement>;
+  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+  onKeyUp: React.KeyboardEventHandler<HTMLElement>;
+}
+export interface UseButtonBaseReturnValue {
+  /**
+   * @param externalProps additional props for the button
+   * @returns props that should be spread on the button
+   */
+  getButtonProps: <ExternalProps extends ButtonBaseExternalProps = ButtonBaseExternalProps>(externalProps?: ExternalProps) => Omit<ExternalProps, keyof ButtonBaseEventHandlers> & ButtonBaseButtonProps & ButtonBaseEventHandlers;
+  rootRef: React.RefObject<HTMLElement | null>;
+}
+export default function useButtonBase(parameters: UseButtonBaseParameters): UseButtonBaseReturnValue;

package/ButtonBase/useButtonBase.d.ts

@@ -0,0 +1,91 @@
+import * as React from 'react';
+export interface UseButtonBaseParameters {
+  /**
+   * Whether the root should be treated as a native `<button>` for render-time semantics.
+   */
+  nativeButton: boolean;
+  /**
+   * The explicit `nativeButton` value provided by the caller, if any.
+   */
+  nativeButtonProp?: boolean | undefined;
+  /**
+   * Whether the default rendered element is expected to be a native button when
+   * `nativeButton` was not explicitly provided.
+   * @default nativeButton
+   */
+  internalNativeButton?: boolean | undefined;
+  /**
+   * Whether to perform additional checks in dev mode on whether the resolved element
+   * matches the default native or non-native button expectation.
+   * Set to `true` to allow hook callers bypass this check, e.g. when the `component`
+   * prop is a string.
+   * @default false
+   */
+  allowInferredHostMismatch?: boolean | undefined;
+  /**
+   * The disabled state of the component.
+   */
+  disabled: boolean;
+  /**
+   * The `type` attribute for the element.
+   */
+  type?: string | undefined;
+  /**
+   * Whether the element has a `formAction` attribute. When true, the hook
+   * will not default `type` to `'button'` for native buttons so the browser
+   * can use its natural submit behaviour.
+   * @default false
+   */
+  hasFormAction?: boolean | undefined;
+  /**
+   * The `tabIndex` attribute for the element.
+   * @default 0
+   */
+  tabIndex?: number | undefined;
+  /**
+   * When `true`, a disabled root can remain focusable.
+   * When `undefined`, the feature is not enabled.
+   */
+  focusableWhenDisabled?: boolean | undefined;
+  /**
+   * When `true`, calls `event.stopPropagation()` on click before the disabled guard runs.
+   * @default false
+   */
+  stopEventPropagation?: boolean | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyDown`, e.g.
+   * to trigger the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyDown?: React.KeyboardEventHandler<HTMLElement> | undefined;
+  /**
+   * An additional function that will run before the user's `onKeyUp`, e.g.
+   * to control the ripple effect in `<ButtonBase>`.
+   */
+  onBeforeKeyUp?: React.KeyboardEventHandler<HTMLElement> | undefined;
+}
+export interface ButtonBaseButtonProps {
+  role?: string | undefined;
+  'aria-disabled'?: boolean | undefined;
+  type?: string | undefined;
+  disabled?: boolean | undefined;
+  tabIndex: number;
+}
+export interface ButtonBaseExternalProps extends React.HTMLAttributes<any> {
+  'aria-disabled'?: boolean | undefined;
+  disabled?: boolean | undefined;
+  type?: string | undefined;
+}
+export interface ButtonBaseEventHandlers {
+  onClick: React.MouseEventHandler<HTMLElement>;
+  onKeyDown: React.KeyboardEventHandler<HTMLElement>;
+  onKeyUp: React.KeyboardEventHandler<HTMLElement>;
+}
+export interface UseButtonBaseReturnValue {
+  /**
+   * @param externalProps additional props for the button
+   * @returns props that should be spread on the button
+   */
+  getButtonProps: <ExternalProps extends ButtonBaseExternalProps = ButtonBaseExternalProps>(externalProps?: ExternalProps) => Omit<ExternalProps, keyof ButtonBaseEventHandlers> & ButtonBaseButtonProps & ButtonBaseEventHandlers;
+  rootRef: React.RefObject<HTMLElement | null>;
+}
+export default function useButtonBase(parameters: UseButtonBaseParameters): UseButtonBaseReturnValue;

package/ButtonBase/useButtonBase.js

@@ -0,0 +1,174 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useButtonBase;
+var React = _interopRequireWildcard(require("react"));
+var _useFocusableWhenDisabled = _interopRequireDefault(require("../utils/useFocusableWhenDisabled"));
+const EMPTY = {};
+function useButtonBase(parameters) {
+  const {
+    nativeButton,
+    nativeButtonProp,
+    internalNativeButton = nativeButton,
+    allowInferredHostMismatch = false,
+    disabled,
+    type,
+    hasFormAction = false,
+    tabIndex = 0,
+    focusableWhenDisabled: focusableWhenDisabledParam,
+    stopEventPropagation = false,
+    onBeforeKeyDown,
+    onBeforeKeyUp
+  } = parameters;
+  const rootRef = React.useRef(null);
+  const focusableWhenDisabled = focusableWhenDisabledParam === true;
+  const focusableWhenDisabledProps = (0, _useFocusableWhenDisabled.default)({
+    focusableWhenDisabled,
+    disabled,
+    isNativeButton: nativeButton,
+    tabIndex
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (root == null) {
+        return;
+      }
+      const isButtonTag = root.tagName === 'BUTTON';
+      if (nativeButtonProp !== undefined) {
+        if (nativeButtonProp && !isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Render a real <button> ' + 'or set `nativeButton` to `false`.';
+          console.error(message);
+        }
+        if (!nativeButtonProp && isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while additionally applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Render a non-<button> such as <div>, or set ' + '`nativeButton` to `true`.';
+          console.error(message);
+        }
+        return;
+      }
+      if (allowInferredHostMismatch) {
+        return;
+      }
+
+      // warn when expecting a native <button> element but a non-string `component` prop resolved to a non-button element
+      if (internalNativeButton && !isButtonTag) {
+        const message = 'MUI: A component rendering a native <button> resolved to a non-<button> element, ' + 'but `nativeButton={false}` was not specified and the resolved root is a non-<button>. ' + 'When rendering a custom component, set `nativeButton={false}` explicitly or render a <button> element.';
+        console.error(message);
+      }
+
+      // warn when expecting a non-button but a non-string `component` prop resolved to a native <button> element
+      if (!internalNativeButton && isButtonTag) {
+        const message = 'MUI: A component that acts as a non-native button resolved to a native <button> element, ' + 'but `nativeButton={true}` was not specified. ' + 'When rendering a custom component, set `nativeButton={true}` explicitly or render a non-<button> element.';
+        console.error(message);
+      }
+    }, [allowInferredHostMismatch, internalNativeButton, nativeButtonProp]);
+  }
+
+  // A helper for event handlers to determine whether to use browser-defined keyboard activation
+  // for native elements like <button> and <a href>, or synthesize Enter/Space clicks for non-native
+  // elements like `<div role="button">`.
+  // This is UNSAFE TO USE outside of event handers, e.g. in render.
+  const hasNativeKeyboardActivation = React.useCallback(() => {
+    const root = rootRef.current;
+    if (root == null) {
+      return nativeButton;
+    }
+    if (root.tagName === 'BUTTON') {
+      return true;
+    }
+
+    // Although this hook is not intended for links, this check is for
+    // backward compatibility with `<ButtonBase href="#" />` since ButtonBase
+    // uses the returned event handlers.
+    return Boolean(root.tagName === 'A' && root.href);
+  }, [nativeButton]);
+  const buttonProps = React.useMemo(() => {
+    const resolvedButtonProps = focusableWhenDisabled ? {} : {
+      tabIndex: disabled ? -1 : tabIndex
+    };
+    if (nativeButton) {
+      resolvedButtonProps.type = type === undefined && !hasFormAction ? 'button' : type;
+      if (!focusableWhenDisabled) {
+        resolvedButtonProps.disabled = disabled;
+      }
+    } else {
+      resolvedButtonProps.role = 'button';
+      if (!focusableWhenDisabled && disabled) {
+        resolvedButtonProps['aria-disabled'] = disabled;
+      }
+    }
+    if (focusableWhenDisabled) {
+      return {
+        ...resolvedButtonProps,
+        ...focusableWhenDisabledProps
+      };
+    }
+    return resolvedButtonProps;
+  }, [disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasFormAction, nativeButton, tabIndex, type]);
+  const getButtonProps = React.useCallback((externalProps = EMPTY) => {
+    const {
+      onClick: externalOnClick,
+      onKeyDown: externalOnKeyDown,
+      onKeyUp: externalOnKeyUp,
+      ...otherExternalProps
+    } = externalProps;
+    const handleClick = event => {
+      if (stopEventPropagation) {
+        event.stopPropagation();
+      }
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      externalOnClick?.(event);
+    };
+    const handleKeyDown = event => {
+      if (focusableWhenDisabled) {
+        focusableWhenDisabledProps.onKeyDown(event);
+      }
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyDown?.(event);
+      externalOnKeyDown?.(event);
+      if (event.target !== event.currentTarget || hasNativeKeyboardActivation()) {
+        return;
+      }
+      if (event.key === ' ') {
+        event.preventDefault();
+        return;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    const handleKeyUp = event => {
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyUp?.(event);
+      externalOnKeyUp?.(event);
+      if (event.target === event.currentTarget && !hasNativeKeyboardActivation() && event.key === ' ' && !event.defaultPrevented) {
+        event.currentTarget.click();
+      }
+    };
+    return {
+      ...buttonProps,
+      ...otherExternalProps,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    };
+  }, [buttonProps, disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasNativeKeyboardActivation, onBeforeKeyDown, onBeforeKeyUp, stopEventPropagation]);
+  return {
+    getButtonProps,
+    rootRef
+  };
+}

package/ButtonBase/useButtonBase.mjs

@@ -0,0 +1,167 @@
+'use client';
+
+import * as React from 'react';
+import useFocusableWhenDisabled from "../utils/useFocusableWhenDisabled.mjs";
+const EMPTY = {};
+export default function useButtonBase(parameters) {
+  const {
+    nativeButton,
+    nativeButtonProp,
+    internalNativeButton = nativeButton,
+    allowInferredHostMismatch = false,
+    disabled,
+    type,
+    hasFormAction = false,
+    tabIndex = 0,
+    focusableWhenDisabled: focusableWhenDisabledParam,
+    stopEventPropagation = false,
+    onBeforeKeyDown,
+    onBeforeKeyUp
+  } = parameters;
+  const rootRef = React.useRef(null);
+  const focusableWhenDisabled = focusableWhenDisabledParam === true;
+  const focusableWhenDisabledProps = useFocusableWhenDisabled({
+    focusableWhenDisabled,
+    disabled,
+    isNativeButton: nativeButton,
+    tabIndex
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      const root = rootRef.current;
+      if (root == null) {
+        return;
+      }
+      const isButtonTag = root.tagName === 'BUTTON';
+      if (nativeButtonProp !== undefined) {
+        if (nativeButtonProp && !isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Render a real <button> ' + 'or set `nativeButton` to `false`.';
+          console.error(message);
+        }
+        if (!nativeButtonProp && isButtonTag) {
+          const message = 'MUI: A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while additionally applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Render a non-<button> such as <div>, or set ' + '`nativeButton` to `true`.';
+          console.error(message);
+        }
+        return;
+      }
+      if (allowInferredHostMismatch) {
+        return;
+      }
+
+      // warn when expecting a native <button> element but a non-string `component` prop resolved to a non-button element
+      if (internalNativeButton && !isButtonTag) {
+        const message = 'MUI: A component rendering a native <button> resolved to a non-<button> element, ' + 'but `nativeButton={false}` was not specified and the resolved root is a non-<button>. ' + 'When rendering a custom component, set `nativeButton={false}` explicitly or render a <button> element.';
+        console.error(message);
+      }
+
+      // warn when expecting a non-button but a non-string `component` prop resolved to a native <button> element
+      if (!internalNativeButton && isButtonTag) {
+        const message = 'MUI: A component that acts as a non-native button resolved to a native <button> element, ' + 'but `nativeButton={true}` was not specified. ' + 'When rendering a custom component, set `nativeButton={true}` explicitly or render a non-<button> element.';
+        console.error(message);
+      }
+    }, [allowInferredHostMismatch, internalNativeButton, nativeButtonProp]);
+  }
+
+  // A helper for event handlers to determine whether to use browser-defined keyboard activation
+  // for native elements like <button> and <a href>, or synthesize Enter/Space clicks for non-native
+  // elements like `<div role="button">`.
+  // This is UNSAFE TO USE outside of event handers, e.g. in render.
+  const hasNativeKeyboardActivation = React.useCallback(() => {
+    const root = rootRef.current;
+    if (root == null) {
+      return nativeButton;
+    }
+    if (root.tagName === 'BUTTON') {
+      return true;
+    }
+
+    // Although this hook is not intended for links, this check is for
+    // backward compatibility with `<ButtonBase href="#" />` since ButtonBase
+    // uses the returned event handlers.
+    return Boolean(root.tagName === 'A' && root.href);
+  }, [nativeButton]);
+  const buttonProps = React.useMemo(() => {
+    const resolvedButtonProps = focusableWhenDisabled ? {} : {
+      tabIndex: disabled ? -1 : tabIndex
+    };
+    if (nativeButton) {
+      resolvedButtonProps.type = type === undefined && !hasFormAction ? 'button' : type;
+      if (!focusableWhenDisabled) {
+        resolvedButtonProps.disabled = disabled;
+      }
+    } else {
+      resolvedButtonProps.role = 'button';
+      if (!focusableWhenDisabled && disabled) {
+        resolvedButtonProps['aria-disabled'] = disabled;
+      }
+    }
+    if (focusableWhenDisabled) {
+      return {
+        ...resolvedButtonProps,
+        ...focusableWhenDisabledProps
+      };
+    }
+    return resolvedButtonProps;
+  }, [disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasFormAction, nativeButton, tabIndex, type]);
+  const getButtonProps = React.useCallback((externalProps = EMPTY) => {
+    const {
+      onClick: externalOnClick,
+      onKeyDown: externalOnKeyDown,
+      onKeyUp: externalOnKeyUp,
+      ...otherExternalProps
+    } = externalProps;
+    const handleClick = event => {
+      if (stopEventPropagation) {
+        event.stopPropagation();
+      }
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      externalOnClick?.(event);
+    };
+    const handleKeyDown = event => {
+      if (focusableWhenDisabled) {
+        focusableWhenDisabledProps.onKeyDown(event);
+      }
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyDown?.(event);
+      externalOnKeyDown?.(event);
+      if (event.target !== event.currentTarget || hasNativeKeyboardActivation()) {
+        return;
+      }
+      if (event.key === ' ') {
+        event.preventDefault();
+        return;
+      }
+      if (event.key === 'Enter') {
+        event.preventDefault();
+        event.currentTarget.click();
+      }
+    };
+    const handleKeyUp = event => {
+      if (disabled) {
+        return;
+      }
+      onBeforeKeyUp?.(event);
+      externalOnKeyUp?.(event);
+      if (event.target === event.currentTarget && !hasNativeKeyboardActivation() && event.key === ' ' && !event.defaultPrevented) {
+        event.currentTarget.click();
+      }
+    };
+    return {
+      ...buttonProps,
+      ...otherExternalProps,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      onKeyUp: handleKeyUp
+    };
+  }, [buttonProps, disabled, focusableWhenDisabled, focusableWhenDisabledProps, hasNativeKeyboardActivation, onBeforeKeyDown, onBeforeKeyUp, stopEventPropagation]);
+  return {
+    getButtonProps,
+    rootRef
+  };
+}

package/CHANGELOG.md

@@ -1,5 +1,53 @@
 # [Versions](https://mui.com/versions/)
 
+## 9.0.0-beta.1
+
+<!-- generated comparing v9.0.0-beta.0..master -->
+
+_Apr 2, 2026_
+
+A big thanks to the 11 contributors who made this release possible.
+
+### `@mui/material@9.0.0-beta.1`
+
+#### Breaking Changes
+
+- [grid] Remove 'column' and 'column-reverse' options from `direction` prop (#47564) @sai6855
+- [icons] Remove legacy `*Outline` icons (#48116) @mj12albert
+- [list-item-icon] Use theme spacing instead of hardcoded minWidth (#46597) @adiitxa
+
+#### Changes
+
+- [all components] Fix `slotProps.transition` types (#48153) @mj12albert
+- [alert][dialog] Accessibility improvements (#48113) @silviuaavram
+- [autocomplete] Fix helper text focusing input when clicked (#48156) @mj12albert
+- [button-base] Add `nativeButton` prop (#47989) @mj12albert
+- [input] Fix high contrast cutoff on first character (#48150) @silviuaavram
+- [menu] Fix empty roving focus container (#48114) @mj12albert
+- [utils] Explicitly register roving tab items with parent (#48122) @mj12albert
+
+### Docs
+
+- Fix HTML validation errors (#48107) @Janpot
+- Fix duplicate IDs and HTML validation issues (#48095) @Janpot
+- Fix the dark mode footer row shadow for the Data Grid on the advanced components page (#48149) @arminmeh
+- Improve jsdom section (#48098) @oliviertassinari
+- Update "Deprecated APIs removed" section to h2 in "Upgrade to v9" docs (#48115) @ZeeshanTamboli
+- [docs][progress] Label all demo components (#48143) @mj12albert
+- [docs-infra] Add x-scheduler to component API URL resolver (#48097) @rita-codes
+- [docs-infra] Resolve some redirects (#48165) @Janpot
+- [docs-infra] Update v9 Search Index (#48028) @dav-is
+
+### Core
+
+- [code-infra] Discover exports for bundle size report (#48170) @Janpot
+- [internal] Fix use of ellipsis (#48096) @oliviertassinari
+- [test] Add screenshot test for Virtualized Table (#47947) @mnajdova
+- [test] Remove `componentsProp` from `describeConformance` tests (#48142) @ZeeshanTamboli
+- [theme] Do not create channel tokens for custom colors when `nativeColor` is used (#47765) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @adiitxa, @arminmeh, @dav-is, @Janpot, @mj12albert, @mnajdova, @oliviertassinari, @rita-codes, @sai6855, @silviuaavram, @ZeeshanTamboli
+
 ## 9.0.0-beta.0
 
 <!-- generated comparing v9.0.0-alpha.4..master -->

package/CardActionArea/CardActionArea.js

@@ -99,6 +99,7 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     ref,
     className: (0, _clsx.default)(classes.root, className),
     additionalProps: {
+      internalNativeButton: true,
       focusVisibleClassName: (0, _clsx.default)(focusVisibleClassName, classes.focusVisible)
     }
   });

package/CardActionArea/CardActionArea.mjs

@@ -92,6 +92,7 @@ const CardActionArea = /*#__PURE__*/React.forwardRef(function CardActionArea(inP
     ref,
     className: clsx(classes.root, className),
     additionalProps: {
+      internalNativeButton: true,
       focusVisibleClassName: clsx(focusVisibleClassName, classes.focusVisible)
     }
   });

package/Chip/Chip.d.mts

@@ -90,6 +90,13 @@ export interface ChipOwnProps {
    * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides> | undefined;
+  /**
+   * If `true`, the component is expected to resolve to a native `<button>` element.
+   * When omitted, custom components inherit the default button semantics of the current wrapper.
+   * Set to `true` when a custom component resolves to a native `<button>`, or `false`
+   * when it resolves to a non-button host.
+   */
+  nativeButton?: boolean | undefined;
   /**
    * If `true`, allows the disabled chip to escape focus.
    * If `false`, allows the disabled chip to receive focus.

package/Chip/Chip.d.ts

@@ -90,6 +90,13 @@ export interface ChipOwnProps {
    * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium', ChipPropsSizeOverrides> | undefined;
+  /**
+   * If `true`, the component is expected to resolve to a native `<button>` element.
+   * When omitted, custom components inherit the default button semantics of the current wrapper.
+   * Set to `true` when a custom component resolves to a native `<button>`, or `false`
+   * when it resolves to a non-button host.
+   */
+  nativeButton?: boolean | undefined;
   /**
    * If `true`, allows the disabled chip to escape focus.
    * If `false`, allows the disabled chip to receive focus.