UI: add Button
#74415
Merged
UI: add Button
#74415
Conversation
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
ciampo
added
[Type] Enhancement
ciampo
commented
Jan 7, 2026
Comment on lines
67
to
68
| // Additional improvement in the original lint rule: only error if disabled=true? | ||
| // eslint-disable-next-line no-restricted-syntax |
Contributor
Author
There was a problem hiding this comment.
We'll need to make sure that existing lint rules that are meant for the @wordpress/components Button will not target the @wordpress/ui Button
Contributor
Author
There was a problem hiding this comment.
@mirka we may have to refactor these lint rules to a custom rule/plugin so that we can lint only components from @wordpress/components — Opus 4.5 suggests something like this (high level):
module.exports = {
create(context) {
// State: track which local names come from @wordpress/components
const componentsImports = new Set();
return {
// Step 1: When we see an import, remember what came from @wordpress/components
ImportDeclaration(node) {
if (node.source.value === '@wordpress/components') {
node.specifiers.forEach(spec => {
componentsImports.add(spec.local.name);
});
}
},
// Step 2: When we see JSX, check if it's from @wordpress/components
JSXOpeningElement(node) {
const componentName = node.name.name;
// Only enforce the rule if this component was imported from @wordpress/components
if (componentsImports.has(componentName)) {
// Check for __next40pxDefaultSize prop...
// Report error if missing...
}
}
};
}
};What do you think?
Member
There was a problem hiding this comment.
Yes, sounds necessary. Also we should start thinking about conventions for when a file wants to import components from both @wordpress/components and @wordpress/ui. There will be a handful of other components with the same name, such as InputControl, and in the transitional phase we may see a file importing it from both packages.
import { InputControl as LegacyInputControl } from '@wordpress/components';
// or
import { InputControl as UIInputControl } from '@wordpress/ui';Maybe the former for less clean up at the end?
ciampo
commented
Jan 7, 2026
Comment on lines
+100
to
+102
| expect( | ||
| screen.getByRole( 'button', { name: 'Click me' } ) | ||
| ).toHaveClass( customClass ); |
Contributor
Author
There was a problem hiding this comment.
We were initially checking for a button classname (internal to the component?) but that test was failing when running the test in Gutenberg. I decided to remove the assertion as it's not really important — what we need to ensure is that the consumer's classname is applied.
ciampo
commented
Jan 7, 2026
| "types": "build-types", | ||
| "sideEffects": false, | ||
| "dependencies": { | ||
| "@ariakit/react": "^0.4.15", |
Contributor
Author
There was a problem hiding this comment.
Using ariakit for now, although I've already prepared a PR for the refactor to base ui: #74416
|
Size Change: -1.04 kB (-0.03%) Total Size: 3.08 MB
ℹ️ View Unchanged
|
|
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. |
aduth
reviewed
Jan 7, 2026
packages/ui/src/button/button.tsx
Outdated
| /** | ||
| * External dependencies | ||
| */ | ||
| // eslint-disable-next-line no-restricted-imports |
Member
There was a problem hiding this comment.
Should we exempt @wordpress/ui similar to what we do with @wordpress/components?
Contributor
Author
There was a problem hiding this comment.
Done! Should we actually add base UI to that list too?
| display: inline-flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| gap: calc(2 * var(--wpds-dimension-base)); /* TODO: Consider new interactive/control gap tokens */ |
Member
There was a problem hiding this comment.
We should track these TODOs in an issue if we're saving them for follow-up.
Contributor
Author
There was a problem hiding this comment.
I've added a "Follow-ups" section in the PR description to keep track of these tasks. For some, I'll open PRs directly. For others, I'll open an issue to discuss next steps if necessary
Add missing dependencies
ciampo
force-pushed
the
feat/wp-ui-button
branch
from
6d9cf02 to
89fb48a
Compare
Contributor
|
Should we introduce destructive variants to support #66810 (comment), or handle that in a follow-up? |
Contributor
Author
I'll follow-up shortly after this PR is merged :) |
Contributor
Author
|
@WordPress/gutenberg-components
This PR is ready for a final review round before merging. |
mirka
approved these changes
Jan 8, 2026
Member
mirka
left a comment
mirka
left a comment
There was a problem hiding this comment.
Mostly nits, but I'd like to see if we can supply a default string for loadingAnnouncement and avoid the discriminated union.
| ) { | ||
| const mergedClassName = clsx( | ||
| resetStyles[ 'box-sizing' ], | ||
| focusStyles[ 'outset-ring--focus-except-active' ], |
Member
There was a problem hiding this comment.
Just FYI I'm thinking of trying composes to restructure these focus styles, but this is fine for now.
Contributor
Author
There was a problem hiding this comment.
Curious to see how that goes
Contributor
Author
|
All feedback addressed, will merge once CI checks have passed |
This was referenced Jan 10, 2026
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Requires #74311
Part of #71196
What?
Closes
Add new
Buttoncomponent to@wordpress/uiWhy?
This is a replacement for the
Iconcomponent in@wordpress/components, with these changes:@wordpress/themevariables (design tokens)aria-pressed)How?
See code
Note: ignore changes from the first commit to see the actual code changes that I applied to adapt the component's code to the WP UI package.
Testing Instructions
Screenshots or screencast
Follow-ups
@wordpress/uiButton: refactor to base ui #74416@wordpress/uiButton: adddestructivetone #74463@wordpress/uiButton: undodestructivetone variant #74540@wordpress/uiButton: tweak disabled styles and rework tokens #74470@wordpress/componentsto custom rules #74611@wordpress/ui#75134Button: add min width #75133