fix: add cursor-pointer to ButtonBase component

[thealxlabs]

🔗 Linked issue

resolves #1760

🧭 Context

The ButtonBase component (app/components/Button/Base.vue) lacked an explicit cursor-pointer class. Browsers default to cursor: auto for <button> elements styled with Tailwind/UnoCSS resets, so clickable buttons appeared with the default arrow cursor instead of the expected pointer.

📚 Description

Added cursor-pointer to the button's static class list so all enabled ButtonBase instances show the pointer cursor. The existing disabled:(cursor-not-allowed) modifier is preserved and continues to override on disabled buttons.

A regression test (test/nuxt/components/ButtonBase.spec.ts) mounts the component and asserts that cursor-pointer is present on the enabled button and cursor-not-allowed is in the class string for the disabled state.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Mar 22, 2026 6:39pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Mar 22, 2026 6:39pm
npmx-lunaria	Ignored		Mar 22, 2026 6:39pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 95b5e618-db4d-4844-ac3a-ed106c9cf617

📥 Commits

Reviewing files that changed from the base of the PR and between 7f2fc1a and 8c31e6e.

📒 Files selected for processing (2)

• app/components/Button/Base.vue
• test/nuxt/components/ButtonBase.spec.ts

---

📝 Walkthrough

Walkthrough

This pull request modifies the ButtonBase component to apply the cursor-pointer class unconditionally to the button element. Previously, the component lacked a cursor style for the enabled state and only applied cursor styling in the disabled state. The change adds cursor-pointer by default whilst retaining disabled:(opacity-40 cursor-not-allowed border-transparent) for disabled states. A corresponding test suite is introduced to verify the cursor classes are correctly applied in both enabled and disabled states, along with validation of the disabled attribute behaviour.

Possibly related PRs

• fix: localization for "go back home" button on error page #1470: Directly modifies the same Button Base component by adding cursor-pointer styling to Base.vue.
• fix: restore default cursor and add commitment in docs #1261: Modifies the class list in app/components/Button/Base.vue affecting the presence of the cursor-pointer utility.
• feat: use default cursor for non-link items #1216: Modifies cursor behaviour for buttons through global button cursor reset changes.

Suggested reviewers

• alexdln
• danielroe
• whitep4nth3r

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description clearly relates to the changeset, explaining the addition of cursor-pointer to ButtonBase and providing context about the issue and testing approach.
Linked Issues check	✅ Passed	The pull request directly addresses issue #1760 by adding cursor-pointer to the ButtonBase component, aligning with the requirement to use pointer cursor for interactive elements and establish unified cursor usage standards.
Out of Scope Changes check	✅ Passed	All changes are within scope: the ButtonBase component modification and corresponding test directly target the pointer cursor requirement for interactive elements specified in issue #1760.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can approve the review once all CodeRabbit's comments are resolved.

Enable the reviews.request_changes_workflow setting to automatically approve the review once all CodeRabbit's comments are resolved.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ All tests successful. No failed tests found.

📢 Thoughts on this report? Let us know!