[useButton] Prevent Space default on valid anchor keydown

[kyukyu-dev]

• I have followed (at least) the PR section of the contributing guide.

This PR fixes an issue where pressing the Space key on a valid anchor (<a href="…">) did not call preventDefault(), causing the page to scroll.
The logic is updated to ensure the Space key behavior on valid links matches expected button-like interaction and prevents unintended scrolling.

[pkg-pr-new]

• vite-css-base-ui-example

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/react@3370
  

  pnpm add https://pkg.pr.new/mui/base-ui/@base-ui-components/utils@3370
  

commit: 9810f87

[mui-bot]

Bundle size report

Bundle	Parsed size	Gzip size
@base-ui-components/react	🔺+22B(+0.01%)	🔺+5B(0.00%)

Details of bundle changes

---

Check out the code infra dashboard for more information about this PR.

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	9810f87
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/692c088f6df25700089fff50
😎 Deploy Preview	https://deploy-preview-3370--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mj12albert]

@kyukyu-dev Are you using this like <Button render={<a />} />?
We don't really intend on supporting this, are you aiming to make a link look like a button?

[kyukyu-dev]

@mj12albert
Yes, exactly. Since I think button styled links are used quite frequently, I wanted to suggest that base-ui consider supporting them.

[mj12albert]

@kyukyu-dev It's intentional that we don't preventDefault on the space here, native <button>s and <a>s respond to the space key differently, so mixing up their interactions could harm the experience for keyboard or assistive tech users

We generally don't recommend <Button render={<a />} /> and will show a warning in dev mode in the future; for sharing styles, we recommend making separate Link and Button components that use the same styles

Alternatively it's also possible (but not a recommendation for the above reason 😬) to preventDefault on space in your own component:

function LinkButton() {
  const buttonRef = React.useRef<HTMLAnchorElement>(null);
  return (
    <Button
      ref={buttonRef}
      onKeyDown={(event) => {
        if (event.key === ' ') {
          event.preventDefault();
          if (buttonRef.current?.href) {
            buttonRef.current?.click();
          }
        }
      }}
      nativeButton={false}
      render={<a href="https://github.com/mui/base-ui/issues">Issues</a>}
    />
  );
}