[Button] Button applying "role=button" to links

[mrmckeb]

Bug report

Current behavior

When using a non-button element with nativeButton={false}, role="button" is always applied.

I realise that this is a helper for accessibility, but I would expect a link to retain it's accessible role.

Expected behavior

The component already checks the element type, and could perhaps only apply the role to non-links?

Reproducible example

https://ui.shadcn.com/docs/components/base/button#link-1

Base UI version

1.1.0

Which browser are you using?

Chrome (and others)

Which OS are you using?

macOs

Which assistive tech are you using (if applicable)?

N/A

Additional context

See the Radix example:
https://ui.shadcn.com/docs/components/radix/button#link-1

[atomiks]

Button is intended to be used for real buttons and always applies button semantics when nativeButton={false} (it will set role="button" for any non-<button> element). The problem is shadcn's Base UI docs currently show Buttons being able to render <a>, so we should make the docs guidance explicit and ideally coordinate an update there as well. (I'm not sure how shadcn wants to support focusableWhenDisabled or <div> buttons, as it could reuse the Radix button logic for Base UI given Radix doesn't have a Button component.)

Here's why it doesn't work with our Button, which we intended to be used for button role-based accessibility logic (role="button" elements), rather than "appearance" based elements (e.g. links that look like a button):

We can't reliably skip role="button" for <a> in SSR because the actual tag is only known after mount. That would require a post-hydration fix and would render incorrect semantics in the server HTML.

During render, the props are computed like so, depending on nativeButton:

• <button type="button" disabled="..." ...> (nativeButton=true)
• <div role="button" aria-disabled="..." ...> (nativeButton=false)

<a>s also probably shouldn't ever be disabled unlike <button>s, so some props (like disabled) are conflicting to begin with.

If you want “a link that looks like a button”, we recommend a separate LinkButton component that renders an <a> and shares the same styles/variants as Button, rather than reusing Button itself. (see #3423)

[mrmckeb]

Thanks, I understand the rationale and this is something we can certainly do on our side by sharing styles.

Should I create an upstream issue for shadcn/ui on this one? They may need to provide different guidance.

[atomiks]

@mrmckeb yeah an issue on shadcn's repo would be good. I've also added my current thoughts about how to deal with this in the next releases: #3423 (comment)