Button: Align link variant underline with Link and ExternalLink#77842
Merged
Conversation
Apply `text-underline-offset: 0.2em` and `text-decoration-thickness: from-font` to the `is-link` variant so it visually matches the `Link` and `ExternalLink` components. Made-with: Cursor
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
…gnment Made-with: Cursor
|
Size Change: +61 B (0%) Total Size: 7.87 MB 📦 View Changed
ℹ️ View Unchanged
|
ciampo
approved these changes
Apr 30, 2026
Contributor
There was a problem hiding this comment.
LGTM 🚀
I will mention that the link variant of Button is still not 100% matching Link and ExternalLink since focus color ($components-color-accent vs. --wpds-color-fg-interactive-brand) and implementation (box-shadow based vs outline based) are different. But I think the changes here are reasonable and well scoped — tweaking Button's focus styles feels like a separate task.
Button with link variant:
Link from @wordpress/ui :
ExternalLink from @wordpress/components:
Contributor
|
Merging, since E2E failures are unrelated to the changes in this PR. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Brings the
linkvariant ofButton(@wordpress/components) in line with the underline styling shared byExternalLinkandLink(@wordpress/ui). Specifically, setstext-underline-offset: 0.2emandtext-decoration-thickness: from-fonton.is-link.Follow-up to #77790.
Why
#77790 aligned
ExternalLinkwithLinkso the two render consistently when used side-by-side. Buttons rendered withvariant="link"were left out and now look mismatched next to the other two — heavier, browser-default underline sitting tight to the baseline. SinceButtonwithvariant="link"is widely used in toolbars, sidebars, and inline UI alongside actual links, it should share the same underline metrics for visual coherence.How
text-underline-offset: 0.2emto match the offset used byLink/ExternalLink.text-decoration-thickness: from-fontso the underline honors the font's own underline metrics rather than a hard-coded sub-pixel value (consistent with the change made in ExternalLink: Align appearance with Link from @wordpress/ui #77790, which moved away from0.5pxfor the same reason — it rendered inconsistently across device pixel ratios).&.is-linkrule inpackages/components/src/button/style.scss.Testing instructions
variantcontrol tolink.Button variant="link"next to anExternalLinkand aLinkfrom@wordpress/ui— underline thickness and offset should now match across all three.