fluentui
fluentui copied to clipboard
microsoft
Adding azure-theme to v9
Previous Behavior
The current themes available for fluent v9 components are: Web Light, Web Dark, Teams Light, Teams Dark, and Teams High Contrast.
Below is an example of the Teams theme being applied on fluent v9 components.
Teams Light Theme Applied:
Teams Dark Theme Applied:
New Behavior
This update will add azure-themes to fluent v9. It adds Azure Light and Azure Dark to the available themes.
Azure Light Theme Applied:
Azure Dark Theme Applied:
📊 Bundle size report
| Package & Exports | Baseline (minified/GZIP) | PR | Change |
|---|---|---|---|
| react-components react-components: Button, FluentProvider & webLightTheme |
71.098 kB20.515 kB |
80.04 kB21.624 kB |
8.942 kB 1.109 kB |
| react-components react-components: FluentProvider & webLightTheme |
43.585 kB14.352 kB |
52.527 kB15.497 kB |
8.942 kB 1.145 kB |
| react-theme Teams: all themes |
35.666 kB7.453 kB |
41.911 kB7.907 kB |
6.245 kB 454 B |
| react-theme Teams: Light theme |
19.642 kB5.549 kB |
28.6 kB6.792 kB |
8.958 kB 1.243 kB |
Unchanged fixtures
| Package & Exports | Size (minified/GZIP) |
|---|---|
| global-context createContext |
510 B328 B |
| global-context createContextSelector |
537 B339 B |
| keyboard-key keyboard-key package |
3.746 kB1.928 kB |
| priority-overflow createOverflowManager |
4.447 kB1.853 kB |
| react ActivityItem |
68.833 kB22.613 kB |
| react Announced |
36.473 kB12.628 kB |
| react Autofill |
15.365 kB4.743 kB |
| react Breadcrumb |
196.083 kB58.757 kB |
| react Button |
190.127 kB55.019 kB |
| react ButtonGrid |
175.918 kB53.25 kB |
| react Calendar |
118.756 kB36.101 kB |
| react Callout |
80.866 kB26.564 kB |
| react Check |
51.062 kB17.152 kB |
| react Checkbox |
57.791 kB19.17 kB |
| react ChoiceGroup |
63.339 kB20.824 kB |
| react ChoiceGroupOption |
56.601 kB18.695 kB |
| react Coachmark |
89.704 kB28.407 kB |
| react Color |
7.737 kB3.106 kB |
| react ColorPicker |
129.984 kB40.589 kB |
| react ComboBox |
245.355 kB70.51 kB |
| react CommandBar |
197.362 kB58.46 kB |
| react ContextualMenu |
150.967 kB46.982 kB |
| react DatePicker |
180.318 kB54.947 kB |
| react DateTimeUtilities |
5.244 kB1.849 kB |
| react DetailsList |
225.886 kB64.647 kB |
| react Dialog |
205.294 kB61.428 kB |
| react Divider |
17.63 kB6.234 kB |
| react DocumentCard |
211.08 kB62.793 kB |
| react DragDrop |
8.343 kB2.724 kB |
| react DraggableZone |
33.345 kB11.166 kB |
| react Dropdown |
227.732 kB66.867 kB |
| react ExtendedPicker |
94.987 kB27.297 kB |
| react Fabric |
39.75 kB13.688 kB |
| react Facepile |
205.992 kB61.67 kB |
| react FloatingPicker |
236.233 kB67.368 kB |
| react FocusTrapZone |
15.831 kB5.54 kB |
| react FocusZone |
53.259 kB16.869 kB |
| react Grid |
175.918 kB53.25 kB |
| react GroupedList |
131.636 kB39.657 kB |
| react GroupedListV2 |
119.324 kB36.822 kB |
| react HoverCard |
93.735 kB29.778 kB |
| react Icon |
49.74 kB16.603 kB |
| react Icons |
65.829 kB24.212 kB |
| react Image |
44.79 kB15.024 kB |
| react Keytip |
78.588 kB25.825 kB |
| react KeytipData |
13.585 kB4.418 kB |
| react KeytipLayer |
100.422 kB31.128 kB |
| react Keytips |
103.175 kB32.07 kB |
| react Label |
36.347 kB12.639 kB |
| react Layer |
45.683 kB15.585 kB |
| react Link |
37.673 kB12.993 kB |
| react List |
38.136 kB12.004 kB |
| react MarqueeSelection |
72.119 kB21.676 kB |
| react MessageBar |
184.707 kB55.523 kB |
| react Modal |
90.409 kB29.213 kB |
| react Nav |
183.442 kB55.093 kB |
| react OverflowSet |
31.044 kB10.593 kB |
| react Overlay |
38.784 kB13.401 kB |
| react Panel |
194.946 kB58.34 kB |
| react Persona |
111.705 kB35.58 kB |
| react PersonaCoin |
111.705 kB35.58 kB |
| react PersonaPresence |
55.928 kB18.715 kB |
| react Pickers |
287.603 kB80.607 kB |
| react Pivot |
184.252 kB55.823 kB |
| react Popup |
12.032 kB4.114 kB |
| react Positioning |
21.821 kB7.334 kB |
| react PositioningContainer |
70.754 kB22.84 kB |
| react ProgressIndicator |
37.498 kB12.906 kB |
| react Rating |
78.989 kB25.18 kB |
| react ResizeGroup |
13.286 kB4.365 kB |
| react ResponsiveMode |
8.078 kB2.95 kB |
| react ScrollablePane |
53.538 kB17.113 kB |
| react SearchBox |
182.982 kB55.1 kB |
| react SelectableOption |
724 B413 B |
| react SelectedItemsList |
226.659 kB66.321 kB |
| react Selection |
41.202 kB11.839 kB |
| react Separator |
33.397 kB11.529 kB |
| react Shimmer |
47.265 kB15.632 kB |
| react ShimmeredDetailsList |
236.654 kB67.42 kB |
| react Slider |
55.575 kB18.574 kB |
| react SpinButton |
186.661 kB56.205 kB |
| react Spinner |
39.691 kB13.815 kB |
| react Stack |
40.761 kB13.931 kB |
| react Sticky |
32.064 kB10.324 kB |
| react Styling |
44.812 kB14.688 kB |
| react SwatchColorPicker |
186.166 kB56.724 kB |
| react TeachingBubble |
200.004 kB59.345 kB |
| react Text |
35.931 kB12.486 kB |
| react TextField |
78.587 kB24.642 kB |
| react Theme |
42.456 kB13.773 kB |
| react ThemeGenerator |
12.34 kB4.106 kB |
| react TimePicker |
235.197 kB68.29 kB |
| react Toggle |
44.17 kB15.346 kB |
| react Tooltip |
84.225 kB27.277 kB |
| react Utilities |
71.851 kB21.843 kB |
| react Viewport |
22.945 kB7.292 kB |
| react WeeklyDayPicker |
98.762 kB30.828 kB |
| react WindowProvider |
1.059 kB541 B |
| react-accordion Accordion (including children components) |
100.125 kB30.423 kB |
| react-alert Alert |
83.737 kB23.475 kB |
| react-avatar Avatar |
50.175 kB15.944 kB |
| react-avatar AvatarGroup |
19.702 kB7.794 kB |
| react-avatar AvatarGroupItem |
64.829 kB20.272 kB |
| react-badge Badge |
26.905 kB8.73 kB |
| react-badge CounterBadge |
27.806 kB9.025 kB |
| react-badge PresenceBadge |
25.311 kB9.307 kB |
| react-breadcrumb @fluentui/react-breadcrumb - package |
115.48 kB31.843 kB |
| react-button Button |
39.513 kB11.17 kB |
| react-button CompoundButton |
46.874 kB12.662 kB |
| react-button MenuButton |
44.292 kB12.544 kB |
| react-button SplitButton |
52.306 kB14.135 kB |
| react-button ToggleButton |
56.559 kB13.068 kB |
| react-calendar-compat Calendar Compat |
152.073 kB39.83 kB |
| react-card Card - All |
101.557 kB28.932 kB |
| react-card Card |
96.382 kB27.401 kB |
| react-card CardFooter |
13.064 kB5.386 kB |
| react-card CardHeader |
15.307 kB6.144 kB |
| react-card CardPreview |
14.015 kB5.752 kB |
| react-checkbox Checkbox |
35.656 kB12.07 kB |
| react-combobox Combobox (including child components) |
102.686 kB33.174 kB |
| react-combobox Dropdown (including child components) |
104.06 kB33.101 kB |
| react-components react-components: Accordion, Button, FluentProvider, Image, Menu, Popover |
217.205 kB61.941 kB |
| react-datepicker-compat DatePicker Compat |
224.523 kB62.94 kB |
| react-dialog Dialog (including children components) |
100.928 kB29.921 kB |
| react-divider Divider |
20.922 kB7.791 kB |
| react-field Field |
22.542 kB8.609 kB |
| react-image Image |
15.745 kB6.231 kB |
| react-infobutton InfoButton |
138.694 kB43.395 kB |
| react-infobutton InfoLabel |
142.495 kB44.625 kB |
| react-input Input |
26.891 kB9.12 kB |
| react-jsx-runtime Classic Pragma |
1.057 kB530 B |
| react-jsx-runtime JSX Dev Runtime |
3.781 kB1.646 kB |
| react-jsx-runtime JSX Runtime |
4.377 kB1.881 kB |
| react-label Label |
14.266 kB5.829 kB |
| react-link Link |
17.082 kB6.911 kB |
| react-menu Menu (including children components) |
149.426 kB45.505 kB |
| react-menu Menu (including selectable components) |
152.112 kB46.018 kB |
| react-message-bar MessageBar (all components) |
25.566 kB9.13 kB |
| react-northstar Accordion |
85.386 kB26.508 kB |
| react-northstar Alert |
87.45 kB26.902 kB |
| react-northstar Animation |
55.329 kB17.82 kB |
| react-northstar Attachment |
86.844 kB26.692 kB |
| react-northstar Avatar |
80.279 kB24.629 kB |
| react-northstar Box |
75.248 kB23.806 kB |
| react-northstar Breadcrumb |
79.914 kB24.701 kB |
| react-northstar Button |
83.16 kB25.947 kB |
| react-northstar Card |
82.699 kB25.017 kB |
| react-northstar Carousel |
105.176 kB31.87 kB |
| react-northstar Chat |
152.354 kB45.951 kB |
| react-northstar Checkbox |
79.807 kB25.078 kB |
| react-northstar Datepicker |
184.921 kB56.165 kB |
| react-northstar Debug |
8.801 kB3.594 kB |
| react-northstar Design |
36.589 kB12.067 kB |
| react-northstar Dialog |
112.052 kB33.62 kB |
| react-northstar Divider |
76.619 kB24.129 kB |
| react-northstar Dropdown |
196.469 kB59.434 kB |
| react-northstar Embed |
81.471 kB25.411 kB |
| react-northstar Flex |
47.728 kB15.438 kB |
| react-northstar Form |
92.521 kB28.871 kB |
| react-northstar Grid |
70.584 kB22.278 kB |
| react-northstar Header |
74.756 kB23.461 kB |
| react-northstar Image |
73.591 kB23.329 kB |
| react-northstar Input |
88.339 kB27.778 kB |
| react-northstar ItemLayout |
78.231 kB24.454 kB |
| react-northstar Label |
77.92 kB24.41 kB |
| react-northstar Layout |
75.393 kB23.798 kB |
| react-northstar List |
88.493 kB27.547 kB |
| react-northstar Loader |
78.616 kB24.729 kB |
| react-northstar Menu |
126.878 kB39.855 kB |
| react-northstar MenuButton |
161.283 kB48.867 kB |
| react-northstar Pill |
83.722 kB26.069 kB |
| react-northstar Popup |
133.592 kB41.476 kB |
| react-northstar Portal |
58.321 kB18.842 kB |
| react-northstar Provider |
93.126 kB29.621 kB |
| react-northstar RadioGroup |
83.276 kB26.049 kB |
| react-northstar Reaction |
77.28 kB24.122 kB |
| react-northstar Segment |
76.209 kB23.892 kB |
| react-northstar Skeleton |
77.765 kB24.2 kB |
| react-northstar Slider |
84.264 kB26.733 kB |
| react-northstar SplitButton |
176.516 kB52.616 kB |
| react-northstar Status |
76.272 kB24.05 kB |
| react-northstar SvgIcon |
36.823 kB11.743 kB |
| react-northstar Table |
80.79 kB25.149 kB |
| react-northstar Text |
74.114 kB23.507 kB |
| react-northstar TextArea |
74.248 kB23.492 kB |
| react-northstar Toolbar |
173.327 kB52.071 kB |
| react-northstar Tooltip |
108.255 kB34.484 kB |
| react-northstar Tree |
87.855 kB27.217 kB |
| react-northstar Video |
75.404 kB23.787 kB |
| react-overflow hooks only |
12.86 kB4.825 kB |
| react-persona Persona |
57.066 kB17.821 kB |
| react-popover Popover |
126.884 kB39.803 kB |
| react-portal Portal |
13.633 kB4.869 kB |
| react-portal-compat PortalCompatProvider |
7.944 kB2.588 kB |
| react-positioning usePositioning |
26.398 kB9.539 kB |
| react-progress ProgressBar |
17.428 kB6.899 kB |
| react-provider FluentProvider |
23.759 kB8.657 kB |
| react-radio Radio |
32.95 kB10.252 kB |
| react-radio RadioGroup |
15.354 kB6.265 kB |
| react-select Select |
28.609 kB10.204 kB |
| react-slider Slider |
39.949 kB12.968 kB |
| react-spinbutton SpinButton |
36.774 kB11.789 kB |
| react-spinner Spinner |
24.696 kB8.342 kB |
| react-switch Switch |
35.14 kB11.199 kB |
| react-table DataGrid |
165.189 kB45.907 kB |
| react-table Table (Primitives only) |
45.324 kB14.116 kB |
| react-table Table as DataGrid |
136.573 kB36.817 kB |
| react-table Table (Selection only) |
76.334 kB20.553 kB |
| react-table Table (Sort only) |
74.977 kB20.155 kB |
| react-tags InteractionTag |
15.259 kB6.056 kB |
| react-tags Tag |
29.982 kB9.441 kB |
| react-tags TagGroup |
80.556 kB24.027 kB |
| react-text Text - Default |
16.705 kB6.57 kB |
| react-text Text - Wrappers |
19.878 kB6.897 kB |
| react-textarea Textarea |
30.947 kB10.477 kB |
| react-theme Single theme token import |
69 B89 B |
| react-timepicker-compat TimePicker |
104.707 kB34.558 kB |
| react-toast Toast (including Toaster) |
100.198 kB29.761 kB |
| react-tooltip Tooltip |
54.58 kB19.188 kB |
| react-utilities SSRProvider |
180 B160 B |
Perf Analysis (@fluentui/react-components)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| Avatar | mount | 665 | 642 | 5000 | |
| Button | mount | 299 | 300 | 5000 | |
| Field | mount | 1123 | 1123 | 5000 | |
| FluentProvider | mount | 707 | 699 | 5000 | |
| FluentProviderWithTheme | mount | 87 | 87 | 10 | |
| FluentProviderWithTheme | virtual-rerender | 63 | 70 | 10 | |
| FluentProviderWithTheme | virtual-rerender-with-unmount | 80 | 70 | 10 | |
| MakeStyles | mount | 868 | 853 | 50000 | |
| Persona | mount | 1743 | 1699 | 5000 | |
| SpinButton | mount | 1391 | 1413 | 5000 |
This pull request is automatically built and testable in CodeSandbox.
To see build info of the built libraries, click here or the icon next to each commit SHA.
![codesandbox-ci[bot] avatar](https://avatars.githubusercontent.com/in/38409?v=4 "Published by a pub.dev verified publisher"){kind=small}
Asset size changes
Size Auditor did not detect a change in bundle size for any component!
Baseline commit: be3a3d59d5c30f75d55c739548d576594ddf5c53 (build)
![size-auditor[bot] avatar](https://avatars.githubusercontent.com/in/13711?v=4 "Published by a pub.dev verified publisher"){kind=small}
Thank you for this, Adriana. Looking over the preview URL at this time.
Im wondering how this aligns with core fluent. are we gonna ship with core theme for every product ?
maybe we should consider having these themes as separate packages for better domain boundaries and not impacting users with additional javascript.
we should discuss this on tech sync
Im wondering how this aligns with core fluent. are we gonna ship with core theme for every product ?
maybe we should consider having these themes as separate packages for better domain boundaries and not impacting users with additional javascript.
we should discuss this on tech sync
In V7/V8, Azure Theme is its own package. We are open to feedback on how to implement, so the Azure portal can use when they move to V9.
Let us discuss this internally first, according to current guidance, this should go to @fluentui-contrib
I think it'd be great to have a way for internal partners to see this theme demo'd that lives close to the Fluent components. I worry putting it in another sandbox will further fork the dev, and ultimately the user experience.
If I recall correctly, the storybook is internal only?
Azure represents a very large (largest?) business for Microsoft with a great opportunity to win the hearts and minds of thousands of Microsoft developers. Would really love to ensure they get a great experience with Fluent.
I do think keeping it in a separate package would keep things tidy, and that's good feedback about the dependency issue. We're still noodling on how to best tackle it. Open to ideas :-)
Perf Analysis (@fluentui/react-northstar)
:warning: 1 potential perf regressions detected
Potential regressions comparing to master
| Scenario | Current PR Ticks | Baseline Ticks | Ratio | Regression Analysis |
|---|---|---|---|---|
| TreeWith60ListItems.default | 93 | 83 | 1.12:1 | analysis |
Perf tests with no regressions
| Scenario | Current PR Ticks | Baseline Ticks | Ratio |
|---|---|---|---|
| RefMinimalPerf.default | 118 | 105 | 1.12:1 |
| AlertMinimalPerf.default | 175 | 158 | 1.11:1 |
| AttachmentSlotsPerf.default | 652 | 598 | 1.09:1 |
| GridMinimalPerf.default | 196 | 179 | 1.09:1 |
| LayoutMinimalPerf.default | 207 | 192 | 1.08:1 |
| PortalMinimalPerf.default | 90 | 83 | 1.08:1 |
| ButtonMinimalPerf.default | 92 | 86 | 1.07:1 |
| CardMinimalPerf.default | 322 | 300 | 1.07:1 |
| AttachmentMinimalPerf.default | 85 | 80 | 1.06:1 |
| AvatarMinimalPerf.default | 108 | 103 | 1.05:1 |
| FormMinimalPerf.default | 231 | 220 | 1.05:1 |
| ListMinimalPerf.default | 309 | 295 | 1.05:1 |
| AnimationMinimalPerf.default | 308 | 295 | 1.04:1 |
| BoxMinimalPerf.default | 197 | 190 | 1.04:1 |
| DropdownManyItemsPerf.default | 394 | 379 | 1.04:1 |
| HeaderMinimalPerf.default | 214 | 206 | 1.04:1 |
| RadioGroupMinimalPerf.default | 267 | 256 | 1.04:1 |
| TableMinimalPerf.default | 235 | 226 | 1.04:1 |
| ChatDuplicateMessagesPerf.default | 150 | 145 | 1.03:1 |
| EmbedMinimalPerf.default | 1877 | 1827 | 1.03:1 |
| ListWith60ListItems.default | 375 | 363 | 1.03:1 |
| SkeletonMinimalPerf.default | 200 | 194 | 1.03:1 |
| TooltipMinimalPerf.default | 1285 | 1244 | 1.03:1 |
| ButtonSlotsPerf.default | 307 | 300 | 1.02:1 |
| CarouselMinimalPerf.default | 255 | 249 | 1.02:1 |
| CheckboxMinimalPerf.default | 1148 | 1121 | 1.02:1 |
| DatepickerMinimalPerf.default | 3550 | 3484 | 1.02:1 |
| DialogMinimalPerf.default | 434 | 424 | 1.02:1 |
| ListCommonPerf.default | 388 | 381 | 1.02:1 |
| ListNestedPerf.default | 319 | 314 | 1.02:1 |
| LoaderMinimalPerf.default | 188 | 184 | 1.02:1 |
| MenuButtonMinimalPerf.default | 959 | 941 | 1.02:1 |
| ProviderMergeThemesPerf.default | 643 | 629 | 1.02:1 |
| ReactionMinimalPerf.default | 215 | 210 | 1.02:1 |
| SegmentMinimalPerf.default | 198 | 195 | 1.02:1 |
| ToolbarMinimalPerf.default | 540 | 528 | 1.02:1 |
| ButtonOverridesMissPerf.default | 650 | 641 | 1.01:1 |
| ChatMinimalPerf.default | 442 | 439 | 1.01:1 |
| HeaderSlotsPerf.default | 457 | 453 | 1.01:1 |
| ItemLayoutMinimalPerf.default | 704 | 694 | 1.01:1 |
| TableManyItemsPerf.default | 1094 | 1082 | 1.01:1 |
| DropdownMinimalPerf.default | 1426 | 1424 | 1:1 |
| FlexMinimalPerf.default | 150 | 150 | 1:1 |
| InputMinimalPerf.default | 528 | 530 | 1:1 |
| MenuMinimalPerf.default | 492 | 494 | 1:1 |
| StatusMinimalPerf.default | 385 | 384 | 1:1 |
| PopupMinimalPerf.default | 339 | 342 | 0.99:1 |
| ProviderMinimalPerf.default | 196 | 197 | 0.99:1 |
| SplitButtonMinimalPerf.default | 2227 | 2249 | 0.99:1 |
| IconMinimalPerf.default | 391 | 396 | 0.99:1 |
| TextMinimalPerf.default | 190 | 192 | 0.99:1 |
| TextAreaMinimalPerf.default | 283 | 286 | 0.99:1 |
| CustomToolbarPrototype.default | 1440 | 1448 | 0.99:1 |
| TreeMinimalPerf.default | 472 | 476 | 0.99:1 |
| ImageMinimalPerf.default | 224 | 228 | 0.98:1 |
| RosterPerf.default | 1559 | 1586 | 0.98:1 |
| SliderMinimalPerf.default | 727 | 742 | 0.98:1 |
| LabelMinimalPerf.default | 210 | 216 | 0.97:1 |
| ChatWithPopoverPerf.default | 181 | 189 | 0.96:1 |
| VideoMinimalPerf.default | 423 | 443 | 0.95:1 |
| DividerMinimalPerf.default | 197 | 211 | 0.93:1 |
| AccordionMinimalPerf.default | 81 | 89 | 0.91:1 |
Perf Analysis (@fluentui/react)
No significant results to display.
All results
| Scenario | Render type | Master Ticks | PR Ticks | Iterations | Status |
|---|---|---|---|---|---|
| BaseButton | mount | 605 | 626 | 5000 | |
| Breadcrumb | mount | 1680 | 1672 | 1000 | |
| Checkbox | mount | 1667 | 1687 | 5000 | |
| CheckboxBase | mount | 1447 | 1490 | 5000 | |
| ChoiceGroup | mount | 2919 | 2970 | 5000 | |
| ComboBox | mount | 652 | 664 | 1000 | |
| CommandBar | mount | 6259 | 6240 | 1000 | |
| ContextualMenu | mount | 12691 | 13548 | 1000 | |
| DefaultButton | mount | 758 | 754 | 5000 | |
| DetailsRow | mount | 2180 | 2146 | 5000 | |
| DetailsRowFast | mount | 2173 | 2213 | 5000 | |
| DetailsRowNoStyles | mount | 2005 | 2015 | 5000 | |
| Dialog | mount | 2627 | 2763 | 1000 | |
| DocumentCardTitle | mount | 222 | 229 | 1000 | |
| Dropdown | mount | 1942 | 1970 | 5000 | |
| FocusTrapZone | mount | 1165 | 1124 | 5000 | |
| FocusZone | mount | 1101 | 1047 | 5000 | |
| GroupedList | mount | 41717 | 41902 | 2 | |
| GroupedList | virtual-rerender | 23620 | 20156 | 2 | |
| GroupedList | virtual-rerender-with-unmount | 51022 | 50702 | 2 | |
| GroupedListV2 | mount | 215 | 230 | 2 | |
| GroupedListV2 | virtual-rerender | 204 | 218 | 2 | |
| GroupedListV2 | virtual-rerender-with-unmount | 230 | 234 | 2 | |
| IconButton | mount | 1123 | 1085 | 5000 | |
| Label | mount | 331 | 337 | 5000 | |
| Layer | mount | 2740 | 2787 | 5000 | |
| Link | mount | 384 | 383 | 5000 | |
| MenuButton | mount | 931 | 936 | 5000 | |
| MessageBar | mount | 21158 | 21218 | 5000 | |
| Nav | mount | 1945 | 1923 | 1000 | |
| OverflowSet | mount | 782 | 781 | 5000 | |
| Panel | mount | 2016 | 1746 | 1000 | |
| Persona | mount | 736 | 720 | 1000 | |
| Pivot | mount | 835 | 872 | 1000 | |
| PrimaryButton | mount | 838 | 847 | 5000 | |
| Rating | mount | 4563 | 4581 | 5000 | |
| SearchBox | mount | 907 | 905 | 5000 | |
| Shimmer | mount | 1917 | 1853 | 5000 | |
| Slider | mount | 1343 | 1315 | 5000 | |
| SpinButton | mount | 2849 | 2866 | 5000 | |
| Spinner | mount | 398 | 387 | 5000 | |
| SplitButton | mount | 1830 | 1847 | 5000 | |
| Stack | mount | 408 | 411 | 5000 | |
| StackWithIntrinsicChildren | mount | 840 | 856 | 5000 | |
| StackWithTextChildren | mount | 2631 | 2620 | 5000 | |
| SwatchColorPicker | mount | 6231 | 6179 | 5000 | |
| TagPicker | mount | 1410 | 1494 | 5000 | |
| Text | mount | 372 | 371 | 5000 | |
| TextField | mount | 955 | 938 | 5000 | |
| ThemeProvider | mount | 832 | 816 | 5000 | |
| ThemeProvider | virtual-rerender | 580 | 590 | 5000 | |
| ThemeProvider | virtual-rerender-with-unmount | 1256 | 1259 | 5000 | |
| Toggle | mount | 619 | 607 | 5000 | |
| buttonNative | mount | 190 | 194 | 5000 |