[bug]: Button does not have cursor-pointer by default

[cheekEprogrammer]

Describe the bug

The Button component does not show a cursor when hovered over by default. Whenever I make a new project now I need to add it in manually. Can this just be put in as a default?

Affected component/components

Button

How to reproduce

• Make a <Button>Hello World</Button> button.
• Hover over the button and the cursor does not change.

Codesandbox/StackBlitz link

No response

Logs

System Info

All

Before submitting

• [x] I've made research efforts and searched the documentation
• [x] I've searched for existing issues

[yhoungdev]

I have been noticing this too, but I always fix it locally.

Is there a chance if I could work on this ?

[cheekEprogrammer]

I have been fixing it locally also each time I start a new project. I would assume its just a matter of adding "cursor-pointer" or something to the default button props. I will admit im not a github expert yet so I did not want to screw anything up with the PR process :)

[yhoungdev]

Yea, just add cursor-pointer to the default state of your ui/button.

[gungdekrisna]

I think this behavior is related to the Tailwind v4 update, where they changed the default cursor style for buttons.

According to the Tailwind v4 Upgrade Guide:

“Buttons now use cursor: default instead of cursor: pointer to match the default browser behavior.”

So in Tailwind v4, buttons no longer automatically show the hand cursor unless you explicitly add cursor-pointer.

I think it's better to create a custom wrapper button component that extends the default Button and includes the additional styling. That way, if you ever need the original style (without cursor-pointer), you can still use the default Button component.

[yhoungdev]

I think this behavior is related to the Tailwind v4 update, where they changed the default cursor style for buttons.

According to the Tailwind v4 Upgrade Guide:

“Buttons now use cursor: default instead of cursor: pointer to match the default browser behavior.”

So in Tailwind v4, buttons no longer automatically show the hand cursor unless you explicitly add cursor-pointer.

I think it's better to create a custom wrapper button component that extends the default Button and includes the additional styling. That way, if you ever need the original style (without cursor-pointer), you can still use the default Button component.

Yes, your approach is good too, but the default state of button has not been like that on @shadcn since tailwind v3

[bernaferrari]

Duplicate of https://github.com/shadcn-ui/ui/issues/6843. I agree it is bad and I hope shadcn/ui fixes this.

[VikasN37]

Tried fixing the issue by applying the cursor-pointer style to the Button component's base. Tested and confirmed working on my local system.

[yhoungdev]

Yea, that is how it was supposed to be

[KostyaCholak]

@layer base {
  button:not([disabled]),
  [role="button"]:not([disabled]) {
    cursor: pointer;
  }
}

This fix is stolen from the original issue in tailwind repo.