[useButton] `nativeButton` prop #1909

atomiks · 2025-05-13T07:07:58Z

Adds nativeButton: boolean prop to components that use useButton.

When using the render prop, you must specify nativeButton={boolean} if the tag that's rendered differs from the default one (these are documented already as Renders a <button> element or Renders a <div> element).

pkg-pr-new · 2025-05-13T07:09:11Z

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@1909

commit: 5377f88

netlify · 2025-05-13T07:09:59Z

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	`5377f88`
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/683ec4e5868cdd00081b95a4
😎 Deploy Preview	https://deploy-preview-1909--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 · 2025-05-21T06:31:18Z

packages/react/src/utils/useRootElementName.ts

@@ -1,7 +1,5 @@
 'use client';


I think this hook was for in case we ever wanted to expose the element/tag name as a prop for other components, since we're not doing that it can just be dropped and merged into useButton

The event handler still uses it inside the events for e.g. event.preventDefault()

michaldudak · 2025-05-27T09:02:00Z

We don't really need to know the actual rendered tag name, but just the fact that they want to render something different than the native <button />. So a boolean prop would suffice.

atomiks · 2025-05-27T09:34:23Z

@michaldudak it also checks for a when computing the rendered props. It will avoid role="button" in that case

base-ui/packages/react/src/use-button/useButton.ts

Lines 59 to 60 in 1634afe

    
           } else if (elementName !== '') { 
        
             if (elementName !== 'A') {

michaldudak · 2025-05-27T09:36:32Z

I don't think we should treat links the same way as buttons. I'd rather have separate useLink hook. This code was ported over from Material UI, where it may make more sense to have a more generic notion of a button, but we are low-level enough to separate buttons and links.

atomiks · 2025-05-27T09:44:30Z

Seems fair enough. Our components usually have a role="" specified (like menuitem or option) to begin with so it might not be an issue. I'll see what I can change.

atomiks · 2025-05-27T11:02:15Z

@michaldudak updated PR description

Adds nativeButton: boolean to any component that uses useButton. We could check the simple case (a plain element like <div />) or always require it to be specified if it differs from the default rendered tag (probably better as it's more explicit/less magical/more consistent).

mui-bot · 2025-05-30T03:48:22Z

Bundle size report

Total Size Change:^{${\tiny{\color{green}▼}}$}-5.56KB^(-0.39%) - Total Gzip Change:^{${\tiny{\color{green}▼}}$}-1.53KB^(-0.31%)
Files: 41 total (0 added, 0 removed, 18 changed)

@base-ui-components/react parsed:^{${\tiny{\color{red}▲}}$}+382B^(+0.13%) gzip:^{${\tiny{\color{red}▲}}$}+147B^(+0.16%)
@base-ui-components/react/switch parsed:^{${\tiny{\color{green}▼}}$}-415B^(-2.91%) gzip:^{${\tiny{\color{green}▼}}$}-125B^(-2.27%)
@base-ui-components/react/radio parsed:^{${\tiny{\color{green}▼}}$}-413B^(-2.75%) gzip:^{${\tiny{\color{green}▼}}$}-135B^(-2.37%)
@base-ui-components/react/number-field parsed:^{${\tiny{\color{green}▼}}$}-409B^(-1.42%) gzip:^{${\tiny{\color{green}▼}}$}-121B^(-1.17%)
@base-ui-components/react/toolbar parsed:^{${\tiny{\color{green}▼}}$}-404B^(-2.18%) gzip:^{${\tiny{\color{green}▼}}$}-62B^(-0.94%)
@base-ui-components/react/checkbox parsed:^{${\tiny{\color{green}▼}}$}-387B^(-2.12%) gzip:^{${\tiny{\color{green}▼}}$}-100B^(-1.46%)
Base UI checkbox parsed:^{${\tiny{\color{green}▼}}$}-387B^(-2.12%) gzip:^{${\tiny{\color{green}▼}}$}-101B^(-1.47%)
@base-ui-components/react/tabs parsed:^{${\tiny{\color{green}▼}}$}-386B^(-1.60%) gzip:^{${\tiny{\color{green}▼}}$}-106B^(-1.23%)
@base-ui-components/react/popover parsed:^{${\tiny{\color{green}▼}}$}-383B^(-0.44%) gzip:^{${\tiny{\color{green}▼}}$}-110B^(-0.38%)
@base-ui-components/react/accordion parsed:^{${\tiny{\color{green}▼}}$}-382B^(-1.65%) gzip:^{${\tiny{\color{green}▼}}$}-108B^(-1.35%)

Show 8 more bundle changes

@base-ui-components/react/collapsible parsed:^{${\tiny{\color{green}▼}}$}-382B^(-2.11%) gzip:^{${\tiny{\color{green}▼}}$}-113B^(-1.80%)
@base-ui-components/react/toggle parsed:^{${\tiny{\color{green}▼}}$}-382B^(-4.25%) gzip:^{${\tiny{\color{green}▼}}$}-109B^(-2.98%)
@base-ui-components/react/toast parsed:^{${\tiny{\color{green}▼}}$}-355B^(-1.34%) gzip:^{${\tiny{\color{green}▼}}$}-107B^(-1.12%)
@base-ui-components/react/alert-dialog parsed:^{${\tiny{\color{green}▼}}$}-326B^(-0.63%) gzip:^{${\tiny{\color{green}▼}}$}-86B^(-0.50%)
@base-ui-components/react/dialog parsed:^{${\tiny{\color{green}▼}}$}-326B^(-0.63%) gzip:^{${\tiny{\color{green}▼}}$}-87B^(-0.50%)
@base-ui-components/react/select parsed:^{${\tiny{\color{green}▼}}$}-266B^(-0.24%) gzip:^{${\tiny{\color{green}▼}}$}-84B^(-0.23%)
@base-ui-components/react/context-menu parsed:^{${\tiny{\color{green}▼}}$}-197B^(-0.18%) gzip:^{${\tiny{\color{green}▼}}$}-75B^(-0.20%)
@base-ui-components/react/menu parsed:^{${\tiny{\color{green}▼}}$}-137B^(-0.12%) gzip:^{${\tiny{\color{green}▼}}$}-51B^(-0.14%)

Details of bundle changes

Generated by 🚫 dangerJS against 5377f88

mj12albert · 2025-06-03T06:58:36Z

packages/react/src/toolbar/link/ToolbarLink.tsx

    buttonRef: forwardedRef,
-    elementName: 'a',
+    native: 'a',
+    focusableWhenDisabled: true,


Links cannot be disabled, thats why focusableWhenDisabled wasn't passed here; I realize the TOOLBAR_LINK_METADATA above is super misleading, but the true is only used for deriving disabledIndices

I added a comment about this here, sorry for conflicting this PR again btw 🙏

I'd also remove support for links in useButton (could be in a separate PR) and create another hook if necessary.

I agree to do it separately; at a glance there's actually nothing to put in a useLink hook and we can just remove the link logic

ToolbarLink is the only link component using this; the only other link component we have is NavigationMenu.Link and that doesn't use useButton

michaldudak · 2025-06-03T07:09:57Z

packages/react/src/toolbar/link/ToolbarLink.tsx

    buttonRef: forwardedRef,
-    elementName: 'a',
+    native: 'a',
+    focusableWhenDisabled: true,


I'd also remove support for links in useButton (could be in a separate PR) and create another hook if necessary.

michaldudak · 2025-06-03T07:12:38Z

docs/reference/generated/accordion-trigger.json

+    "nativeButton": {
+      "type": "boolean",
+      "default": "true",
+      "description": "Determines whether the component is being rendered as a native button."


IMO we need a more detailed description what it's for. How about adding "Set it to false if the render prop renders a non-interactive element, like div or span."?

It can technically be replaced with an interactive element, so I think any different tag should be the doc

atomiks · 2025-06-03T07:53:24Z

packages/react/src/use-button/useButton.ts

+    if (hasError) {
+      throw new Error(
+        `Set the \`nativeButton\` prop to \`${isButtonButFalse}\` when rendering a <${tagNameLower}> element.`,
+      );
+    }
+  }, [native]);


Since this prop is quite obscure and not shown in the types when using render by default, a runtime error is likely required

Nevermind, doesn't play nicely with the conformance tests

docs/src/app/(public)/(content)/react/components/popover/demos/hero/css-modules/index.tsx

[useButton] Ensure disabled attribute is present during SSR

1634afe

atomiks added the core label May 13, 2025

atomiks requested review from colmtuite and michaldudak as code owners May 13, 2025 07:07

mj12albert reviewed May 21, 2025

View reviewed changes

atomiks added 2 commits May 27, 2025 20:51

nativeButton prop

c16fdae

docs:api

f59caae

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 27, 2025

Merge

029fdd1

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 27, 2025

Remove stale hook

2506cd5

atomiks changed the title ~~[useButton] Ensure disabled attribute is present during SSR~~ [useButton] nativeButton prop May 27, 2025

atomiks added 3 commits May 27, 2025 20:57

lint

cbfcfd7

docs:api

a9c17b8

lint

82dc625

atomiks requested a review from mj12albert May 27, 2025 11:03

atomiks force-pushed the fix/use-button-disabled-ssr branch from 99db41e to 3a4f135 Compare May 27, 2025 11:05

Fix ToolbarLink

2091c45

atomiks force-pushed the fix/use-button-disabled-ssr branch from 3a4f135 to 2091c45 Compare May 27, 2025 11:05

atomiks added 4 commits May 27, 2025 21:23

lint

0a604c7

lint

be2979d

lint

1be7aea

lint

9812fb6

Merge

8ee3945

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label May 30, 2025

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 2, 2025

mj12albert mentioned this pull request Jun 3, 2025

[field][switch][checkbox][radio] Support implicit Field.Label #2036

Merged

1 task

Merge

8768d01

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 3, 2025

lint

e1ce51c

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 3, 2025

mj12albert reviewed Jun 3, 2025

View reviewed changes

michaldudak reviewed Jun 3, 2025

View reviewed changes

atomiks added 2 commits June 3, 2025 17:32

docs:api

b751936

Merge

ec20666

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged. label Jun 3, 2025

atomiks added 2 commits June 3, 2025 17:37

lint

16f1d9e

Throw error

60da455

atomiks commented Jun 3, 2025

View reviewed changes

Remove error

831d046

michaldudak reviewed Jun 3, 2025

View reviewed changes

docs/src/app/(public)/(content)/react/components/popover/demos/hero/css-modules/index.tsx Outdated Show resolved Hide resolved

lint

1619072

michaldudak approved these changes Jun 3, 2025

View reviewed changes

lint

5377f88

mj12albert mentioned this pull request Jun 3, 2025

[buttons] Extract useFocusableWhenDisabled from useButton #2058

Merged

1 task

mj12albert approved these changes Jun 3, 2025

View reviewed changes

atomiks merged commit 9387240 into mui:master Jun 4, 2025
22 checks passed

atomiks deleted the fix/use-button-disabled-ssr branch June 4, 2025 02:17

atomiks mentioned this pull request Jun 15, 2025

[form] Form Fails to Submit via Enter Key When a Checkbox is Present #2117

Closed

mj12albert added the breaking change Introduces changes that are not backward compatible. label Jul 16, 2025

oliviertassinari added internal Behind-the-scenes enhancement. Formerly called “core”. and removed core labels Aug 2, 2025

Uh oh!

[useButton] nativeButton prop #1909

[useButton] nativeButton prop #1909

Uh oh!

Conversation

atomiks commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

netlify bot commented May 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for base-ui ready!

Uh oh!

mj12albert May 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

michaldudak commented May 27, 2025

Uh oh!

atomiks commented May 27, 2025

Uh oh!

michaldudak commented May 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

atomiks commented May 27, 2025

Uh oh!

atomiks commented May 27, 2025

Uh oh!

mui-bot commented May 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle size report

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

[useButton] `nativeButton` prop #1909

[useButton] `nativeButton` prop #1909

atomiks commented May 13, 2025 •

edited

Loading

pkg-pr-new bot commented May 13, 2025 •

edited

Loading

netlify bot commented May 13, 2025 •

edited

Loading

mj12albert May 21, 2025 •

edited

Loading

michaldudak commented May 27, 2025 •

edited

Loading

mui-bot commented May 30, 2025 •

edited

Loading