Skip to content

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

Draft
NeeshSamsi wants to merge 4 commits intonpmx-dev:mainfrom
NeeshSamsi:fix/icon-button-padding
Draft

fix(ui): improve design of buttons/links with icons#1542
NeeshSamsi wants to merge 4 commits intonpmx-dev:mainfrom
NeeshSamsi:fix/icon-button-padding

Conversation

@NeeshSamsi
Copy link

Fixes #1255

  1. Adjusts padding on buttons and links when an icon is present to make sure they are optically balanced.
  2. 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.

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.
@vercel
Copy link

vercel bot commented Feb 19, 2026

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

Project Deployment Actions Updated (UTC)
npmx.dev Error Error Feb 19, 2026 3:10am
2 Skipped Deployments
Project Deployment Actions Updated (UTC)
docs.npmx.dev Ignored Ignored Preview Feb 19, 2026 3:10am
npmx-lunaria Ignored Ignored Feb 19, 2026 3:10am

Request Review

@NeeshSamsi
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improve design of buttons/links with icons

1 participant

Comments