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

[vedrani]

Button migration diff

Generated: 2026-05-06 11:34:48 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: 7d2f07d

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

[vedrani]

Closing canary 18; will re-run after Phase 1 stabilization.

[github-actions]

🗑️ Storybook preview cleaned up

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