[Tier 0] migrate Button to @base-ui/react + Tailwind

[vedrani]

Button migration diff

Generated: 2026-05-06 11:46:47 CEST

Package: packages/base/Button

Files

No file additions, deletions, or renames.

Imports

Removed:

packages/base/Button/src/ButtonBase/ButtonBase.tsx:import type { ButtonRootSlotProps } from '@mui/base/Button'
packages/base/Button/src/ButtonBase/ButtonBase.tsx:import { Button as MUIButtonBase } from '@mui/base/Button'

Added:

packages/base/Button/dist-package/src/Button/Button.d.ts:import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react';
packages/base/Button/dist-package/src/Button/Button.d.ts:import type { StandardProps, SizeType, ButtonOrAnchorProps, OverridableComponent, TextLabelProps } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/Button/index.d.ts:export * from './Button';
packages/base/Button/dist-package/src/Button/index.d.ts:export * from './styles';
packages/base/Button/dist-package/src/Button/index.d.ts:export { default as Button } from './Button';
packages/base/Button/dist-package/src/Button/index.d.ts:import type { Props } from './Button';
packages/base/Button/dist-package/src/Button/styles.d.ts:import type { IconPositionType, VariantType } from './Button';
packages/base/Button/dist-package/src/Button/styles.d.ts:import type { SizeType } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonAction/ButtonAction.d.ts:import type { BaseProps, ButtonOrAnchorProps, OverridableComponent } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonAction/ButtonAction.d.ts:import type { IconPositionType } from '../Button';
packages/base/Button/dist-package/src/ButtonAction/ButtonAction.d.ts:import type { ReactElement, MouseEvent, ElementType } from 'react';
packages/base/Button/dist-package/src/ButtonAction/index.d.ts:export { default as ButtonAction } from './ButtonAction';
packages/base/Button/dist-package/src/ButtonAction/index.d.ts:import type { Props } from './ButtonAction';
packages/base/Button/dist-package/src/ButtonAction/styles.d.ts:import type { IconPositionType } from '../ButtonBase';
packages/base/Button/dist-package/src/ButtonBase/ButtonBase.d.ts:import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react';
packages/base/Button/dist-package/src/ButtonBase/ButtonBase.d.ts:import type { StandardProps, ButtonOrAnchorProps, OverridableComponent, TextLabelProps } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonBase/index.d.ts:export type { IconPositionType } from './ButtonBase';
packages/base/Button/dist-package/src/ButtonBase/index.d.ts:export { default as ButtonBase } from './ButtonBase';
packages/base/Button/dist-package/src/ButtonBase/index.d.ts:import type { Props } from './ButtonBase';
packages/base/Button/dist-package/src/ButtonCheckbox/ButtonCheckbox.d.ts:import type { ButtonControlLabelProps } from '../ButtonControlLabel';
packages/base/Button/dist-package/src/ButtonCheckbox/index.d.ts:export { default as ButtonCheckbox } from './ButtonCheckbox';
packages/base/Button/dist-package/src/ButtonCheckbox/index.d.ts:import type { Props } from './ButtonCheckbox';
packages/base/Button/dist-package/src/ButtonCircular/ButtonCircular.d.ts:import type { BaseProps, ButtonOrAnchorProps, OverridableComponent } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonCircular/ButtonCircular.d.ts:import type { ReactElement, MouseEvent, ElementType } from 'react';
packages/base/Button/dist-package/src/ButtonCircular/index.d.ts:export type { VariantType as ButtonCircularVariantType } from './ButtonCircular';
packages/base/Button/dist-package/src/ButtonCircular/index.d.ts:export { default as ButtonCircular } from './ButtonCircular';
packages/base/Button/dist-package/src/ButtonCircular/index.d.ts:import type { Props } from './ButtonCircular';
packages/base/Button/dist-package/src/ButtonCircular/styles.d.ts:import type { VariantType } from './ButtonCircular';
packages/base/Button/dist-package/src/ButtonControlLabel/ButtonControlLabel.d.ts:import React from 'react';
packages/base/Button/dist-package/src/ButtonControlLabel/ButtonControlLabel.d.ts:import type { BaseProps, SizeType } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonControlLabel/ButtonControlLabel.d.ts:import type { ReactElement, ReactNode } from 'react';
packages/base/Button/dist-package/src/ButtonControlLabel/index.d.ts:export { default as ButtonControlLabel } from './ButtonControlLabel';
packages/base/Button/dist-package/src/ButtonControlLabel/index.d.ts:import type { Props } from './ButtonControlLabel';
packages/base/Button/dist-package/src/ButtonGroup/ButtonGroup.d.ts:import React from 'react';
packages/base/Button/dist-package/src/ButtonGroup/ButtonGroup.d.ts:import type { BaseProps } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonGroup/ButtonGroup.d.ts:import type { ReactNode, HTMLAttributes } from 'react';
packages/base/Button/dist-package/src/ButtonGroup/index.d.ts:export { default as ButtonGroup } from './ButtonGroup';
packages/base/Button/dist-package/src/ButtonGroup/index.d.ts:import type { OmitInternalProps } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonGroup/index.d.ts:import type { Props } from './ButtonGroup';
packages/base/Button/dist-package/src/ButtonGroupItem/ButtonGroupItem.d.ts:import type { ButtonProps } from '../Button';
packages/base/Button/dist-package/src/ButtonGroupItem/index.d.ts:export { default as ButtonGroupItem } from './ButtonGroupItem';
packages/base/Button/dist-package/src/ButtonRadio/ButtonRadio.d.ts:import type { ButtonControlLabelProps } from '../ButtonControlLabel';
packages/base/Button/dist-package/src/ButtonRadio/index.d.ts:export { default as ButtonRadio } from './ButtonRadio';
packages/base/Button/dist-package/src/ButtonRadio/index.d.ts:import type { Props } from './ButtonRadio';
packages/base/Button/dist-package/src/ButtonSplit/ButtonSplit.d.ts:import React from 'react';
packages/base/Button/dist-package/src/ButtonSplit/ButtonSplit.d.ts:import type { BaseProps } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonSplit/ButtonSplit.d.ts:import type { ButtonProps } from '../Button';
packages/base/Button/dist-package/src/ButtonSplit/ButtonSplit.d.ts:import type { ReactNode, HTMLAttributes } from 'react';
packages/base/Button/dist-package/src/ButtonSplit/index.d.ts:export { default as ButtonSplit } from './ButtonSplit';
packages/base/Button/dist-package/src/ButtonSplit/index.d.ts:import type { OmitInternalProps } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/ButtonSplit/index.d.ts:import type { Props } from './ButtonSplit';
packages/base/Button/dist-package/src/ButtonSplit/styles.d.ts:import type { SizeType } from '@toptal/picasso-shared';
packages/base/Button/dist-package/src/index.d.ts:export * from './Button';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonAction';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonCheckbox';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonCircular';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonCompound';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonControlLabel';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonGroup';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonGroupItem';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonRadio';
packages/base/Button/dist-package/src/index.d.ts:export * from './ButtonSplit';
packages/base/Button/src/ButtonBase/ButtonBase.tsx:import { Button as BaseUIButton } from '@base-ui/react/button'

MUI v4 / JSS residue check

Check	Count
@material-ui/* source imports	0
JSS calls (makeStyles/createStyles/withStyles)	0
@material-ui/core in package.json	0
0

Migration is NOT complete until all three are 0.

package.json delta

@@ -32,7 +32,7 @@
     "@toptal/picasso-utils": "4.0.0",
     "@toptal/picasso-link": "4.0.0",
     "ap-style-title-case": "^1.1.2",
-    "@mui/base": "5.0.0-beta.58",
+    "@base-ui/react": "^1.4.1",
     "classnames": "^2.5.1"
   },
   "sideEffects": [
@@ -43,7 +43,7 @@
     "@toptal/picasso-tailwind-merge": "^2.0.0",
     "@toptal/picasso-tailwind": ">=2.7",
     "@toptal/picasso-provider": "*",
-    "react": ">=16.12.0 < 19.0.0"
+    "react": ">=16.12.0"
   },
   "exports": {
     ".": "./dist-package/src/index.js"

Prop-surface diff

(no dist-package output to compare — was the package built before snapshot?)

Happo

Happo log: migration-runs/2026-05-06/Button/happo.log (0
? flagged lines).

Designer: review screen diffs >0.5% per docs/migration/migration-plan.md §6.3.

React 19 smoke

Stubbed (pending PF-1994). The real smoke wires up during PF-1994's first migration.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 9170273

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[github-actions]

	Fails
🚫	Commit 9170273 does not meet requirements of Commit Message Quality: format of commit title is not correct (read more): Title should start with capital letter Title should not end with a full-stop (i.e .) Example of a valid commit title: Regular commit message [FOO-1234] Commit with prefix [FOO][BAR] Coupled prefixes
🚫	The pull request title is missing a Jira issue code. Correct format '[ASD-123] Add a cool feature'. If you're working without a Jira issue then add a 'no-jira' label to your pull request.
🚫	Please assign someone to this PR before merging.

Generated by 🚫 dangerJS against 9170273

[vedrani]

Closing canary 19 — consumer-package snapshot regression (Pagination, etc.) is the expected ripple from Button's DOM cleanup ('base-' empty class removal + new data-disabled attr). Re-canary will land after orchestrator Phase 2.5 (consumer-aware gate stage) catches this locally before PR open.

[github-actions]

🗑️ Storybook preview cleaned up

The preview deployment has been automatically removed since this PR was closed.