[button] Warn in dev mode when rendering a native link#3423
[button] Warn in dev mode when rendering a native link#3423mj12albert wants to merge 8 commits intomui:masterfrom
Conversation
mj12albert
commented
Dec 4, 2025
mj12albert
commented
- I have followed (at least) the PR section of the contributing guide.
commit: |
Bundle size report
Check out the code infra dashboard for more information about this PR. |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
mj12albert
force-pushed
the
use-button-link-warning
branch
from
72b9049 to
beb4f7e
Compare
| 'A component that acts as a button was rendered as a native <button>, which does not match the default. Ensure that the element passed to the `render` prop of the component is not a real <button>, or set the `nativeButton` prop on the component to `true`.', | ||
| ); | ||
| } else if (elementRef.current.tagName === 'A') { | ||
| warn( |
There was a problem hiding this comment.
WDYT, would error work here as well? 🤔
github-actions
bot
added
the
PR: out-of-date
mj12albert
force-pushed
the
use-button-link-warning
branch
from
74367ec to
9e0bca1
Compare
github-actions
bot
removed
the
PR: out-of-date
mj12albert
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
|
It might be too late to add this warning given shadcn's integration: 
Might be better to have a bullet point under "Usage guidelines" and a doc section about not using |
|
Maybe we should warn against passing disabled if rendering a link instead? That's more of an actual a11y mistake than simply replacing the element with a link 🤔 |
Another issue is that |
github-actions
bot
added
the
PR: out-of-date
|
My current thoughts on this:
|
| ); | ||
| } else if (elementRef.current.tagName === 'A') { | ||
| warn( | ||
| 'A component that acts as a button was rendered as an <a> tag, which could cause usability issues for keyboard and assistive tech users. Prefer using `<a>` directly.', |
There was a problem hiding this comment.
shadcn updated, so we can likely warn now.
- This should say "causes" not "could cause"
- Mention
Menu.LinkItemfor the old Menu case, or possibly silence/ignore the warning in that case?
There was a problem hiding this comment.
shadcn isn't using links in their regular <Menu>, it's dev mode and just a warning (not error) so maybe it's not worth making a special case for it? @atomiks
There was a problem hiding this comment.
I think a lot of users who were using the render pattern might not know of Menu.LinkItem yet, so silencing might be better or at least mentioning that component name in the warning message to let them know to migrate
github-actions
bot
removed
the
PR: out-of-date
4 participants
