refactor(react-button): streamline button component base hook and remove unused base hooks #35689

dmytrokirpa · 2026-01-21T22:15:32Z

Previous Behavior

Fluent-design specific button components (CompoundButton, MenuButton, SplitButton) had separate base hooks that weren't necessary
Base hooks for Button and ToggleButton were in separate files, inconsistent with other component patterns
Custom props (like navType in CarouselButton) were inadvertently forwarded to the DOM after removing getIntrinsicElementProps

New Behavior

Removed unnecessary base hooks:

CompoundButton, MenuButton, and SplitButton no longer have separate base implementations
These components now directly compose useButton_unstable since they don't need design-agnostic variants
Deleted useCompoundButtonBase.ts, useMenuButtonBase.ts, useSplitButtonBase.ts and their associated types

Consolidated base hooks for consistency:

Moved useButtonBase_unstable into useButton.ts
Moved useToggleButtonBase_unstable into useToggleButton.ts`
This aligns with the pattern used in other components where base hooks live alongside their main hooks

Fixed custom props forwarding:

Components now destructure custom props before passing remaining props downstream
Prevents custom props from leaking to the DOM (fixes CarouselButton's navType prop issue)

Related Issue(s)

Fixes #

github-actions · 2026-01-22T08:13:02Z

📊 Bundle size report

Package & Exports	Baseline (minified/GZIP)	PR	Change
`react-breadcrumb` @fluentui/react-breadcrumb - package	`115.758 kB` `31.742 kB`	`115.797 kB` `31.761 kB`	`39 B` `19 B`
`react-button` Button	`38.231 kB` `10.651 kB`	`34.848 kB` `9.346 kB`	`-3.383 kB` `-1.305 kB`
`react-button` CompoundButton	`45.12 kB` `11.965 kB`	`41.729 kB` `10.704 kB`	`-3.391 kB` `-1.261 kB`
`react-button` MenuButton	`43.183 kB` `12.08 kB`	`39.752 kB` `10.733 kB`	`-3.431 kB` `-1.347 kB`
`react-button` SplitButton	`52.236 kB` `13.714 kB`	`48.549 kB` `12.383 kB`	`-3.687 kB` `-1.331 kB`
`react-button` ToggleButton	`55.154 kB` `12.482 kB`	`51.824 kB` `11.201 kB`	`-3.33 kB` `-1.281 kB`
`react-charts` AreaChart	`407.113 kB` `124.705 kB`	`406.971 kB` `124.656 kB`	`-142 B` `-49 B`
`react-charts` DeclarativeChart	`756.944 kB` `217.867 kB`	`756.802 kB` `217.787 kB`	`-142 B` `-80 B`
`react-charts` DonutChart	`317.554 kB` `94.682 kB`	`317.412 kB` `94.548 kB`	`-142 B` `-134 B`
`react-charts` FunnelChart	`309.104 kB` `91.572 kB`	`308.959 kB` `91.534 kB`	`-145 B` `-38 B`
`react-charts` GanttChart	`390.222 kB` `118.264 kB`	`390.114 kB` `118.194 kB`	`-108 B` `-70 B`
`react-charts` GaugeChart	`316.985 kB` `94.055 kB`	`316.843 kB` `93.974 kB`	`-142 B` `-81 B`
`react-charts` GroupedVerticalBarChart	`398.1 kB` `120.879 kB`	`397.96 kB` `120.836 kB`	`-140 B` `-43 B`
`react-charts` HeatMapChart	`392.303 kB` `120.013 kB`	`392.161 kB` `120.027 kB`	`-142 B` `14 B`
`react-charts` HorizontalBarChart	`297.281 kB` `86.243 kB`	`297.139 kB` `86.298 kB`	`-142 B` `55 B`
`react-charts` Legends	`236.192 kB` `69.589 kB`	`236.093 kB` `69.537 kB`	`-99 B` `-52 B`
`react-charts` LineChart	`417.675 kB` `126.61 kB`	`417.535 kB` `126.528 kB`	`-140 B` `-82 B`
`react-charts` PolarChart	`346.165 kB` `105.681 kB`	`346.028 kB` `105.616 kB`	`-137 B` `-65 B`
`react-charts` ScatterChart	`397.502 kB` `120.762 kB`	`397.362 kB` `120.727 kB`	`-140 B` `-35 B`
`react-charts` VerticalBarChart	`434.577 kB` `126.369 kB`	`434.437 kB` `126.436 kB`	`-140 B` `67 B`
`react-charts` VerticalStackedBarChart	`404.014 kB` `121.7 kB`	`403.874 kB` `121.717 kB`	`-140 B` `17 B`
`react-components` react-components: Button, FluentProvider & webLightTheme	`71.11 kB` `20.219 kB`	`71.194 kB` `20.229 kB`	`84 B` `10 B`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`237.741 kB` `68.697 kB`	`237.78 kB` `68.705 kB`	`39 B` `8 B`
`react-components` react-components: entire library	`1.291 MB` `323.024 kB`	`1.291 MB` `322.925 kB`	`-498 B` `-99 B`

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-card` Card - All	`106.017 kB` `29.756 kB`
`react-card` Card	`98.685 kB` `27.88 kB`
`react-card` CardFooter	`13.642 kB` `5.438 kB`
`react-card` CardHeader	`16.175 kB` `6.303 kB`
`react-card` CardPreview	`13.726 kB` `5.574 kB`
`react-charts` HorizontalBarChartWithAxis	`63 B` `83 B`
`react-charts` SankeyChart	`214.767 kB` `65.946 kB`
`react-charts` Sparkline	`91.393 kB` `28.708 kB`
`react-components` react-components: FluentProvider & webLightTheme	`44.409 kB` `14.303 kB`
`react-dialog` Dialog (including children components)	`102.964 kB` `30.723 kB`
`react-message-bar` MessageBar (all components)	`24.15 kB` `8.907 kB`
`react-portal-compat` PortalCompatProvider	`8.386 kB` `2.624 kB`
`react-tag-picker` @fluentui/react-tag-picker - package	`187.42 kB` `56.172 kB`
`react-teaching-popover` TeachingPopover	`102.017 kB` `30.539 kB`
`react-timepicker-compat` TimePicker	`109.036 kB` `36.023 kB`
`react-tree` FlatTree	`148.521 kB` `42.459 kB`
`react-tree` PersonaFlatTree	`150.347 kB` `42.844 kB`
`react-tree` PersonaTree	`146.407 kB` `41.672 kB`
`react-tree` Tree	`144.587 kB` `41.298 kB`

_{🤖 This report was generated against ac121640c52fc058f59c2ed650692489732596e7}

github-actions · 2026-01-22T08:15:11Z

Pull request demo site: URL

github-actions · 2026-01-22T08:59:21Z

change/@fluentui-react-button-e83c949c-d849-4636-b94e-c16be2c6079b.json

@@ -0,0 +1,7 @@
+{


🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Charts-DonutChart 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Charts-DonutChart.Dynamic.default.chromium.png 5581 Changed

vr-tests-react-components/Positioning 1 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 609 Changed

vr-tests-react-components/TagPicker 3 screenshots

Image Name Diff(in Pixels) Image Type

vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png 1319 Changed

vr-tests-react-components/TagPicker.disabled - RTL.chromium.png 635 Changed

vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png 677 Changed

There were 3 duplicate changes discarded. Check the build logs for more information.

…ove unused base hooks

change/@fluentui-react-button-e83c949c-d849-4636-b94e-c16be2c6079b.json

Hotell · 2026-01-23T13:39:14Z

packages/react-components/react-button/library/etc/react-button.api.md


 // @public
-export const useCompoundButton_unstable: (props: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;
+export const useCompoundButton_unstable: ({ contentContainer, secondaryContent, ...props }: CompoundButtonProps, ref: React_2.Ref<HTMLButtonElement | HTMLAnchorElement>) => CompoundButtonState;


lets keep the destructuring inside these public functions as before instead doing func argument ...rest, to avoid API changes. while from TS pov this should be identical, it affect javascript emit

…079b.json Co-authored-by: Martin Hochel <[email protected]>

Hotell

LGTM

dmytrokirpa changed the title ~~refactor(react-button): streamline button component base hook and rem…~~ refactor(react-button): streamline button component base hook and remove unused base hooks Jan 22, 2026

dmytrokirpa force-pushed the refactor/button-state-hooks branch from 2b258b1 to 28d31f8 Compare January 22, 2026 08:06

microsoft-github-policy-service bot added the PR: API Modified label Jan 22, 2026

dmytrokirpa force-pushed the refactor/button-state-hooks branch from 28d31f8 to 18ee655 Compare January 22, 2026 08:07

github-actions bot reviewed Jan 22, 2026

View reviewed changes

dmytrokirpa force-pushed the refactor/button-state-hooks branch from 18ee655 to 21ca0b7 Compare January 22, 2026 10:44

refactor(react-button): streamline button component base hook and rem…

02eb71c

…ove unused base hooks

dmytrokirpa force-pushed the refactor/button-state-hooks branch from 21ca0b7 to 02eb71c Compare January 22, 2026 11:00

dmytrokirpa marked this pull request as ready for review January 22, 2026 12:32

dmytrokirpa requested review from a team, Mitch-At-Work and marcosmoura as code owners January 22, 2026 12:32

dmytrokirpa requested a review from Hotell January 22, 2026 12:32

dmytrokirpa self-assigned this Jan 23, 2026

Hotell reviewed Jan 23, 2026

View reviewed changes

dmytrokirpa and others added 3 commits January 23, 2026 16:20

Update change/@fluentui-react-button-e83c949c-d849-4636-b94e-c16be2c6…

f3e596c

…079b.json Co-authored-by: Martin Hochel <[email protected]>

apply review suggestions

23c0a10

Merge branch 'master' into refactor/button-state-hooks

bfea038

Hotell approved these changes Jan 23, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

refactor(react-button): streamline button component base hook and remove unused base hooks #35689

refactor(react-button): streamline button component base hook and remove unused base hooks #35689

dmytrokirpa commented Jan 21, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 22, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Jan 22, 2026

Uh oh!

github-actions bot Jan 22, 2026 •

edited

Loading

Uh oh!

Uh oh!

Hotell Jan 23, 2026

Uh oh!

dmytrokirpa Jan 23, 2026 •

edited

Loading

Uh oh!

Hotell left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Image Name	Diff(in Pixels)	Image Type
vr-tests-react-components/TagPicker.disabled - High Contrast.chromium.png	1319	Changed
vr-tests-react-components/TagPicker.disabled - RTL.chromium.png	635	Changed
vr-tests-react-components/TagPicker.disabled.disabled input hover.chromium.png	677	Changed

refactor(react-button): streamline button component base hook and remove unused base hooks #35689

Are you sure you want to change the base?

refactor(react-button): streamline button component base hook and remove unused base hooks #35689

Conversation

dmytrokirpa commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Previous Behavior

New Behavior

Removed unnecessary base hooks:

Consolidated base hooks for consistency:

Fixed custom props forwarding:

Related Issue(s)

Uh oh!

github-actions bot commented Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📊 Bundle size report

Uh oh!

github-actions bot commented Jan 22, 2026

Uh oh!

github-actions bot Jan 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

🕵🏾‍♀️ visual changes to review in the Visual Change Report

Uh oh!

Uh oh!

Hotell Jan 23, 2026

Choose a reason for hiding this comment

Uh oh!

dmytrokirpa Jan 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Hotell left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dmytrokirpa commented Jan 21, 2026 •

edited

Loading

github-actions bot commented Jan 22, 2026 •

edited

Loading

github-actions bot Jan 22, 2026 •

edited

Loading

dmytrokirpa Jan 23, 2026 •

edited

Loading