diff --git a/change/@fluentui-react-breadcrumb-preview-7e120363-acbe-4042-a23f-87482c4bb9f1.json b/change/@fluentui-react-breadcrumb-preview-7e120363-acbe-4042-a23f-87482c4bb9f1.json
new file mode 100644
index 0000000000000..baa965c5c6613
--- /dev/null
+++ b/change/@fluentui-react-breadcrumb-preview-7e120363-acbe-4042-a23f-87482c4bb9f1.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: used makeResetStyles instead of makeStyles",
+  "packageName": "@fluentui/react-breadcrumb-preview",
+  "email": "vkozlova@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md b/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md
index d9271544cf2e6..c5ce2fb117b71 100644
--- a/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md
+++ b/packages/react-components/react-breadcrumb-preview/etc/react-breadcrumb-preview.api.md
@@ -26,7 +26,7 @@ export const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps>;
 export const breadcrumbButtonClassNames: SlotClassNames<BreadcrumbButtonSlots>;
 
 // @public
-export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'appearance' | 'size'> & Pick<ButtonProps, 'disabled'> & {
+export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> & Pick<BreadcrumbProps, 'appearance' | 'size'> & Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
     current?: boolean;
 };
 
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
index 9cf70496e0d39..302474cdc4224 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbButton/BreadcrumbButton.types.ts
@@ -9,7 +9,7 @@ export type BreadcrumbButtonSlots = ButtonSlots;
  */
 export type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> &
   Pick<BreadcrumbProps, 'appearance' | 'size'> &
-  Pick<ButtonProps, 'disabled'> & {
+  Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {
     /**
      * Defines current sate of BreadcrumbButton.
      *
diff --git a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
index 73665291148b2..57494004dd167 100644
--- a/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
+++ b/packages/react-components/react-breadcrumb-preview/src/components/BreadcrumbItem/useBreadcrumbItemStyles.styles.ts
@@ -1,4 +1,4 @@
-import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { makeStyles, makeResetStyles, mergeClasses, shorthands } from '@griffel/react';
 import type { BreadcrumbItemSlots, BreadcrumbItemState } from './BreadcrumbItem.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { tokens, typographyStyles } from '@fluentui/react-theme';
@@ -9,17 +9,23 @@ export const breadcrumbItemClassNames: SlotClassNames<BreadcrumbItemSlots> = {
   icon: 'fui-BreadcrumbItem__icon',
 };
 
+const useBreadcrumbItemResetStyles = makeResetStyles({
+  display: 'flex',
+  alignItems: 'center',
+  color: tokens.colorNeutralForeground2,
+  boxSizing: 'border-box',
+  textWrap: 'nowrap',
+
+  // Styles for the medium (default) size
+  height: '32px',
+  ...shorthands.padding(tokens.spacingHorizontalSNudge),
+  ...typographyStyles.body1,
+});
+
 /**
  * Styles for the root slot
  */
 const useStyles = makeStyles({
-  root: {
-    display: 'flex',
-    alignItems: 'center',
-    color: tokens.colorNeutralForeground2,
-    boxSizing: 'border-box',
-    textWrap: 'nowrap',
-  },
   icon: {
     display: 'inline-flex',
     alignItems: 'center',
@@ -31,11 +37,6 @@ const useStyles = makeStyles({
     ...shorthands.padding(tokens.spacingHorizontalSNudge),
     ...typographyStyles.caption1,
   },
-  medium: {
-    height: '32px',
-    ...shorthands.padding(tokens.spacingHorizontalSNudge),
-    ...typographyStyles.body1,
-  },
   large: {
     height: '40px',
     ...shorthands.padding(tokens.spacingHorizontalS),
@@ -59,21 +60,27 @@ const useStyles = makeStyles({
  * Apply styling to the BreadcrumbItem slots based on the state
  */
 export const useBreadcrumbItemStyles_unstable = (state: BreadcrumbItemState): BreadcrumbItemState => {
+  const resetStyles = useBreadcrumbItemResetStyles();
   const styles = useStyles();
   const iconStyles = useIconStyles();
   const size = state.size || 'medium';
+  const sizeMap = {
+    small: styles.small,
+    medium: '', // Medium is the default. No need to apply any styles
+    large: styles.large,
+  } as const;
   const currentSizeMap = {
     small: styles.currentSmall,
     medium: styles.currentMedium,
     large: styles.currentLarge,
-  };
+  } as const;
   const noSpacingStyle =
     state.isInteractive || (!state.isInteractive && state.size === 'small') ? styles.noSpacing : '';
 
   state.root.className = mergeClasses(
     breadcrumbItemClassNames.root,
-    styles.root,
-    styles[size],
+    resetStyles,
+    sizeMap[size],
     state.current && currentSizeMap[size],
     noSpacingStyle,
     state.root.className,