fix(ui): improve symmetry of buttons/links with icons by NeeshSamsi · Pull Request #1542 · npmx-dev/npmx.dev · GitHub

Adjusts padding on buttons and links when an icon is present to make sure they are optically balanced.
Adjusts padding on icon-only buttons and links to make them square with equal padding on all sides.

When detecting an icon-only button, I am detecting an empty slot. This was not working with the current sr-only spans. I replaced them with aria-label. As far as I know, this shouldn't be a problem but please let me know if that was overstepping on the scope of this change.

This is my first contribution to a major opensource project. Please let me know if I made any mistakes so I can figure it out.

Detect icon-only buttons with useSlot

sr-only spans made slots.default truthy, breaking auto-detection. aria-label is an equivalent accessible alternative that lets the slot be empty.

icon-only for mobile only breaks auto-detection. Manually override padding on mobile.

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Jun 16, 2026 11:54pm
npmx.dev	Ready	Preview, Comment	Jun 16, 2026 11:54pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Jun 16, 2026 11:54pm

All the errors scared me for a second but it seems like it's an issue with a package install?

I left a nit-pick comment, feel free to check it out and apply it or not.

Co-authored-by: Sybren W <sybren.willemot@gmail.com>

📝 Walkthrough

Walkthrough

This pull request adds icon-only detection to Button and Link base components and updates their medium/small size class bindings accordingly, then converts several package-related link/button instances to use explicit aria-label attributes instead of nested visually-hidden spans.

Changes

Icon-aware styling and accessibility improvements

Layer / File(s)	Summary
Icon-aware styling in Button and Link base components app/components/Button/Base.vue, app/components/Link/Base.vue	Button and Link components now detect icon-only state via a computed iconOnly flag (based on classicon prop and default slot presence). Class bindings for medium and small sizes are updated to apply conditional padding and text-size classes when an icon is present for both disabled span and NuxtLink/button render paths.
Accessibility label migration in Package components app/components/Package/Dependencies.vue, app/components/Package/Versions.vue, app/components/Package/WeeklyDownloadStats.vue	Vulnerability, deprecated, distribution and “view all versions” link/button elements now provide explicit :aria-label attributes and are rendered as self-closing LinkBase/ButtonBase components; nested sr-only spans containing the same text were removed.

Possibly related PRs

npmx-dev/npmx.dev#2752: Modifies app/components/Button/Base.vue class bindings and overlaps at the same component styling logic.

Suggested reviewers

alexdln

🚥 Pre-merge checks | ✅ 4 ✅ Passed checks (4 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description is directly related to the changeset, explaining the padding adjustments for icon buttons and the aria-label changes.
Linked Issues check	✅ Passed	The PR successfully addresses issue #1255 by reducing padding around icons in buttons and links to make them optically balanced, as required.
Out of Scope Changes check	✅ Passed	The aria-label replacements for sr-only spans are directly related to enabling icon-only button detection, which is a necessary change to meet the PR objectives.
Title check	✅ Passed	The title 'fix(ui): improve symmetry of buttons/links with icons' accurately describes the main objective of the PR, which is to adjust padding on buttons and links with icons to make them optically balanced and symmetrical.

✏️ 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

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

Codecov Report

❌ Patch coverage is 50.00000% with 2 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Button/Base.vue	50.00%	0 Missing and 1 partial ⚠️
app/components/Link/Base.vue	50.00%	0 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

app/components/Link/Base.vue (1)
68-87: ⚠️ Potential issue | 🟡 Minor

Disabled LinkBase drops classicon content.

In the disabled branch, only <slot /> is rendered. At Line 68-87, links configured with classicon (especially icon-only usage) can render as an empty control.
🔧 Proposed fix
-  <span
+  <span
     v-if="disabled"
@@
-    ><slot
-  /></span>
+  >
+    <span v-if="classicon" class="size-[1em]" :class="classicon" aria-hidden="true" />
+    <slot />
+  </span>

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 365bd9f and 4d3d6cd.

📒 Files selected for processing (7)

app/components/Button/Base.vue
app/components/Link/Base.vue
app/components/Package/Dependencies.vue
app/components/Package/Versions.vue
app/components/Package/WeeklyDownloadStats.vue
app/pages/index.vue
app/pages/package/[[org]]/[name].vue

@NeeshSamsi would you be up for updating this PR?

I took the liberty to update this PR with new changes from main.
Since I made the changes I would like to have another set of eyes look over it 🙏

The difference seems to be negligible, perhaps it was bigger at the time of the PR opening 🤔 I'll close this for now, but please re-open if anyone disagrees 🙏

cc: @alexdln

With Diff:	Without Diff:

Actually I do see it xD

Thanks for your first contribution, @NeeshSamsi! 💫

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.

Co-authored-by: Sybren W <sybren.willemot@gmail.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Felix Schneider <99918022+trueberryless@users.noreply.github.com> Co-authored-by: Willow (GHOST) <git@willow.sh>

NeeshSamsi added 4 commits February 18, 2026 22:51

fix: improve design of buttons/links with icons (npmx-dev#1255 )

ccebf91

feat(ui): auto-detect icon-only buttons for consistent spacing

bb0cc7e

Detect icon-only buttons with useSlot

fix(ui): use aria-label instead of sr-only spans for icon-only buttons

39b1337

sr-only spans made slots.default truthy, breaking auto-detection. aria-label is an equivalent accessible alternative that lets the slot be empty.

fix(ui): make homepage search button square on mobile

ff4be8b

icon-only for mobile only breaks auto-detection. Manually override padding on mobile.

vercel Bot had a problem deploying to Preview – npmx.dev February 19, 2026 03:10 Failure

Sybren-crwk suggested changes Feb 24, 2026

View reviewed changes

Comment thread app/components/Button/Base.vue Outdated

fix: Apply suggestion from @carwack for better TS support

28016fc

Co-authored-by: Sybren W <sybren.willemot@gmail.com>

vercel Bot had a problem deploying to Preview – npmx.dev February 27, 2026 16:41 Failure

NeeshSamsi marked this pull request as ready for review February 27, 2026 16:45

Merge branch 'main' into fix/icon-button-padding

66a9a1d

[autofix.ci] apply automated fixes

4d3d6cd

vercel Bot deployed to Preview – npmx.dev February 27, 2026 16:49 View deployment

coderabbitai Bot reviewed Feb 27, 2026

View reviewed changes

Comment thread app/components/Button/Base.vue

serhalp requested a review from knowler March 15, 2026 13:54

serhalp added the needs review This PR is waiting for a review from a maintainer label Mar 15, 2026

ghostdevv requested changes Apr 5, 2026

View reviewed changes

serhalp added stale This has become stale and may be closed soon and removed needs review This PR is waiting for a review from a maintainer labels Apr 10, 2026

github-actions Bot removed the stale This has become stale and may be closed soon label Apr 18, 2026

serhalp added the stale This has become stale and may be closed soon label May 9, 2026

github-actions Bot removed the stale This has become stale and may be closed soon label May 10, 2026

github-actions Bot added the stale This has become stale and may be closed soon label Jun 9, 2026

Merge branch 'main' into fix/icon-button-padding

a510794

trueberryless requested a review from ghostdevv June 13, 2026 19:27

vercel Bot deployed to Preview – docs.npmx.dev June 13, 2026 19:28 View deployment

vercel Bot deployed to Preview – npmx.dev June 13, 2026 19:28 View deployment

fix: coderabbit suggestion

1578acf

trueberryless approved these changes Jun 13, 2026

View reviewed changes

vercel Bot deployed to Preview – npmx.dev June 13, 2026 19:48 View deployment

github-actions Bot removed the stale This has become stale and may be closed soon label Jun 14, 2026

ghostdevv closed this Jun 16, 2026

ghostdevv reopened this Jun 16, 2026

ghostdevv changed the title fix(ui): improve design of buttons/links with icons fix(ui): improve symmetry of buttons/links with icons Jun 16, 2026

Merge branch 'main' into fix/icon-button-padding

e15df42

vercel Bot deployed to Preview – docs.npmx.dev June 16, 2026 23:53 View deployment

vercel Bot deployed to Preview – npmx.dev June 16, 2026 23:54 View deployment

ghostdevv approved these changes Jun 17, 2026

View reviewed changes

ghostdevv added this pull request to the merge queue Jun 17, 2026

Merged via the queue into npmx-dev:main with commit 7e68437 Jun 17, 2026
24 checks passed

github-actions Bot mentioned this pull request Jun 17, 2026

chore: release v0.16.0 #2856

Merged

coderabbitai Bot mentioned this pull request Jul 22, 2026

feat: increase text and interactive elems contrast #2621

Merged

fix(ui): improve symmetry of buttons/links with icons by NeeshSamsi · Pull Request #1542 · npmx-dev/npmx.dev · GitHub

Uh oh!

Uh oh!

fix(ui): improve symmetry of buttons/links with icons - #1542

fix(ui): improve symmetry of buttons/links with icons#1542ghostdevv merged 10 commits intonpmx-dev:mainnpmx-dev/npmx.dev:mainfrom NeeshSamsi:fix/icon-button-paddingNeeshSamsi/npmx.dev:fix/icon-button-paddingCopy head branch name to clipboard

Conversation

NeeshSamsi commented Feb 19, 2026

Uh oh!

vercel Bot commented Feb 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

NeeshSamsi commented Feb 19, 2026

Uh oh!

Sybren-crwk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Possibly related PRs

Suggested reviewers

Uh oh!

codecov Bot commented Feb 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

coderabbitai Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ghostdevv left a comment

Choose a reason for hiding this comment

Uh oh!

trueberryless commented Jun 13, 2026

Uh oh!

ghostdevv commented Jun 16, 2026

Uh oh!

ghostdevv commented Jun 16, 2026

Uh oh!

Uh oh!

github-actions Bot commented Jun 17, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

fix(ui): improve symmetry of buttons/links with icons#1542
ghostdevv merged 10 commits into
npmx-dev:mainfrom
NeeshSamsi:fix/icon-button-padding

vercel Bot commented Feb 19, 2026 •
edited
Loading

coderabbitai Bot commented Feb 27, 2026 •
edited
Loading

codecov Bot commented Feb 27, 2026 •
edited
Loading