diff --git a/packages/react-components/react-tags/src/components/Tag/useTag.tsx b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
index 47c5e8428c45c7..57d7727b5b24ca 100644
--- a/packages/react-components/react-tags/src/components/Tag/useTag.tsx
+++ b/packages/react-components/react-tags/src/components/Tag/useTag.tsx
@@ -7,8 +7,8 @@ import { useTagGroupContext_unstable } from '../../contexts/TagGroupContext';
 
 const tagAvatarSizeMap = {
   medium: 28,
-  small: 24,
-  'extra-small': 20,
+  small: 20,
+  'extra-small': 16,
 } as const;
 
 const tagAvatarShapeMap = {
diff --git a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
index edc4c3943ba06f..66214279b80479 100644
--- a/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/Tag/useTagStyles.styles.ts
@@ -14,80 +14,45 @@ export const tagClassNames: SlotClassNames<TagSlots> = {
 };
 
 /**
- * Base styles shared by Tag/TagButton
+ * Inner horizontal space left and right of Tag
  */
-export const useTagBaseStyles = makeStyles({
-  media: {
-    ...shorthands.gridArea('media'),
-    alignSelf: 'center',
-    paddingLeft: tokens.spacingHorizontalXXS,
-    paddingRight: tokens.spacingHorizontalS,
-  },
-  icon: {
-    ...shorthands.gridArea('media'),
-    display: 'flex',
-    alignSelf: 'center',
-    paddingLeft: '6px',
-    paddingRight: '2px',
-  },
-  primaryText: {
-    gridColumnStart: 'primary',
-    gridRowStart: 'primary',
-    gridRowEnd: 'secondary',
-    ...typographyStyles.body1,
-    paddingLeft: tokens.spacingHorizontalXXS,
-    paddingRight: tokens.spacingHorizontalXXS,
-    whiteSpace: 'nowrap',
-  },
-  primaryTextWithSecondaryText: {
-    ...shorthands.gridArea('primary'),
-    ...typographyStyles.caption1,
-  },
-  secondaryText: {
-    ...shorthands.gridArea('secondary'),
-    paddingLeft: tokens.spacingHorizontalXXS,
-    paddingRight: tokens.spacingHorizontalXXS,
-    ...typographyStyles.caption2,
-    whiteSpace: 'nowrap',
-  },
-});
+const tagSpacingMedium = '7px';
+const tagSpacingSmall = '5px';
+const tagSpacingExtraSmall = '5px';
+
+const mediumIconSize = '20px';
+const smallIconSize = '16px';
+const extraSmallIconSize = '12px';
+
+const useRootStyles = makeStyles({
+  base: {
+    // TODO use makeResetStyle when styles are settled
 
-export const useResetButtonStyles = makeStyles({
-  resetButton: {
-    color: 'inherit',
+    // reset default button style:
     fontFamily: 'inherit',
-    lineHeight: 'normal',
-    ...shorthands.overflow('visible'),
     ...shorthands.padding(0),
-    ...shorthands.borderStyle('none'),
     appearance: 'button',
     textAlign: 'unset',
-    backgroundColor: 'transparent',
-  },
-});
 
-const useTagStyles = makeStyles({
-  root: {
-    // TODO use makeResetStyle when styles are settled
     display: 'inline-grid',
     alignItems: 'center',
-    gridTemplateRows: '1fr auto auto 1fr',
     gridTemplateAreas: `
-    "media .         dismissIcon"
     "media primary   dismissIcon"
     "media secondary dismissIcon"
-    "media .         dismissIcon"
     `,
-
     boxSizing: 'border-box',
-    height: '32px',
     width: 'fit-content',
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
-
     backgroundColor: tokens.colorNeutralBackground3,
     color: tokens.colorNeutralForeground2,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
 
+    ':hover': {
+      cursor: 'pointer',
+    },
+  },
+
+  rounded: {
+    ...shorthands.borderRadius(tokens.borderRadiusMedium),
     ...createCustomFocusIndicatorStyle(
       {
         ...shorthands.borderRadius(tokens.borderRadiusMedium),
@@ -95,91 +60,225 @@ const useTagStyles = makeStyles({
       },
       { enableOutline: true },
     ),
-
-    ':hover': {
-      cursor: 'pointer',
-    },
   },
-  rootCircular: {
+  circular: {
     ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.borderRadius(tokens.borderRadiusCircular),
-    }),
+    ...createCustomFocusIndicatorStyle(
+      {
+        ...shorthands.borderRadius(tokens.borderRadiusCircular),
+        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+      },
+      { enableOutline: true },
+    ),
+  },
+
+  medium: {
+    height: '32px',
+  },
+  small: {
+    height: '24px',
+  },
+  'extra-small': {
+    height: '20px',
+  },
+});
+/**
+ * Styles for root slot when Tag is without leading media/icon
+ */
+const useRootWithoutMediaStyles = makeStyles({
+  medium: {
+    paddingLeft: tagSpacingMedium,
+  },
+  small: {
+    paddingLeft: tagSpacingSmall,
   },
-  rootWithoutMedia: {
-    paddingLeft: tokens.spacingHorizontalS,
+  'extra-small': {
+    paddingLeft: tagSpacingExtraSmall,
   },
-  rootWithoutDismiss: {
+});
+/**
+ * Styles for root slot when Tag is without dismiss icon
+ */
+const useRootWithoutDismissStyles = makeStyles({
+  medium: {
+    paddingRight: tagSpacingMedium,
+  },
+  small: {
+    paddingRight: tagSpacingSmall,
+  },
+  'extra-small': {
+    paddingRight: tagSpacingExtraSmall,
+  },
+});
+
+export const useIconStyles = makeStyles({
+  base: {
+    ...shorthands.gridArea('media'),
+    display: 'flex',
+  },
+  medium: {
+    paddingLeft: tagSpacingMedium,
+    paddingRight: tokens.spacingHorizontalXS,
+    width: mediumIconSize,
+    fontSize: mediumIconSize,
+  },
+  small: {
+    paddingLeft: tagSpacingSmall,
+    paddingRight: tokens.spacingHorizontalXXS,
+    width: smallIconSize,
+    fontSize: smallIconSize,
+  },
+  'extra-small': {
+    paddingLeft: tagSpacingExtraSmall,
+    paddingRight: tokens.spacingHorizontalXXS,
+    width: extraSmallIconSize,
+    fontSize: extraSmallIconSize,
+  },
+});
+
+export const useMediaStyles = makeStyles({
+  base: {
+    ...shorthands.gridArea('media'),
+    display: 'flex',
+    paddingLeft: '1px',
+  },
+  medium: {
     paddingRight: tokens.spacingHorizontalS,
   },
+  small: {
+    paddingRight: tokens.spacingHorizontalSNudge,
+  },
+  'extra-small': {
+    paddingRight: tokens.spacingHorizontalSNudge,
+  },
+});
 
-  dismissIcon: {
+const useDismissIconStyles = makeStyles({
+  base: {
     ...shorthands.gridArea('dismissIcon'),
     display: 'flex',
-    alignItems: 'center',
-    fontSize: '20px',
-    paddingLeft: '2px',
-    paddingRight: '6px',
+  },
+  medium: {
+    paddingLeft: tokens.spacingHorizontalXS,
+    paddingRight: tagSpacingMedium,
+    fontSize: mediumIconSize,
+  },
+  small: {
+    paddingLeft: tokens.spacingHorizontalXXS,
+    paddingRight: tagSpacingSmall,
+    fontSize: smallIconSize,
+  },
+  'extra-small': {
+    paddingLeft: tokens.spacingHorizontalXXS,
+    paddingRight: tagSpacingExtraSmall,
+    fontSize: extraSmallIconSize,
+  },
+});
+
+export const usePrimaryTextStyles = makeStyles({
+  base: {
+    whiteSpace: 'nowrap',
+    paddingLeft: tokens.spacingHorizontalXXS,
+    paddingRight: tokens.spacingHorizontalXXS,
+  },
+
+  medium: {
+    ...typographyStyles.body1,
+  },
+  small: {
+    ...typographyStyles.caption1,
+  },
+  'extra-small': {
+    ...typographyStyles.caption1,
   },
 
-  // TODO add additional classes for fill/outline appearance, different sizes, and state
+  withoutSecondaryText: {
+    gridColumnStart: 'primary',
+    gridRowStart: 'primary',
+    gridRowEnd: 'secondary',
+    paddingBottom: tokens.spacingHorizontalXXS,
+  },
+  withSecondaryText: {
+    ...shorthands.gridArea('primary'),
+    ...typographyStyles.caption1,
+    marginTop: '-2px',
+  },
 });
 
-const useSmallTagStyles = makeStyles({
-  root: {
-    height: '24px',
+export const useSecondaryTextStyles = makeStyles({
+  base: {
+    ...shorthands.gridArea('secondary'),
+    paddingLeft: tokens.spacingHorizontalXXS,
+    paddingRight: tokens.spacingHorizontalXXS,
+    ...typographyStyles.caption2,
+    whiteSpace: 'nowrap',
   },
-  // TODO add additional styles for sizes
 });
 
 /**
  * Apply styling to the Tag slots based on the state
  */
 export const useTagStyles_unstable = (state: TagState): TagState => {
-  const baseStyles = useTagBaseStyles();
-  const resetButtonStyles = useResetButtonStyles();
-  const styles = useTagStyles();
-  const smallStyles = useSmallTagStyles();
+  const rootStyles = useRootStyles();
+  const rootWithoutMediaStyles = useRootWithoutMediaStyles();
+  const rootWithoutDismissStyles = useRootWithoutDismissStyles();
+
+  const iconStyles = useIconStyles();
+  const mediaStyles = useMediaStyles();
+  const dismissIconStyles = useDismissIconStyles();
+  const primaryTextStyles = usePrimaryTextStyles();
+  const secondaryTextStyles = useSecondaryTextStyles();
+
+  const { shape, size } = state;
 
   state.root.className = mergeClasses(
     tagClassNames.root,
-    resetButtonStyles.resetButton,
 
-    styles.root,
-    state.shape === 'circular' && styles.rootCircular,
-    !state.media && !state.icon && styles.rootWithoutMedia,
-    !state.dismissIcon && styles.rootWithoutDismiss,
+    rootStyles.base,
+    rootStyles[shape],
+    rootStyles[size],
 
-    state.size === 'small' && smallStyles.root,
+    !state.media && !state.icon && rootWithoutMediaStyles[size],
+    !state.dismissIcon && rootWithoutDismissStyles[size],
 
     state.root.className,
   );
 
   if (state.media) {
-    state.media.className = mergeClasses(tagClassNames.media, baseStyles.media, state.media.className);
+    state.media.className = mergeClasses(
+      tagClassNames.media,
+      mediaStyles.base,
+      mediaStyles[size],
+      state.media.className,
+    );
   }
   if (state.icon) {
-    state.icon.className = mergeClasses(tagClassNames.icon, baseStyles.icon, state.icon.className);
+    state.icon.className = mergeClasses(tagClassNames.icon, iconStyles.base, iconStyles[size], state.icon.className);
   }
   if (state.primaryText) {
     state.primaryText.className = mergeClasses(
       tagClassNames.primaryText,
-      baseStyles.primaryText,
-      state.secondaryText && baseStyles.primaryTextWithSecondaryText,
+
+      primaryTextStyles.base,
+      primaryTextStyles[size],
+
+      state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,
+
       state.primaryText.className,
     );
   }
   if (state.secondaryText) {
     state.secondaryText.className = mergeClasses(
       tagClassNames.secondaryText,
-      baseStyles.secondaryText,
+      secondaryTextStyles.base,
       state.secondaryText.className,
     );
   }
   if (state.dismissIcon) {
     state.dismissIcon.className = mergeClasses(
       tagClassNames.dismissIcon,
-      styles.dismissIcon,
+      dismissIconStyles.base,
+      dismissIconStyles[size],
       state.dismissIcon.className,
     );
   }
diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx
index 9ba53fb344a6f0..dcb4f6a5a0ad4e 100644
--- a/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx
+++ b/packages/react-components/react-tags/src/components/TagButton/useTagButton.tsx
@@ -7,8 +7,8 @@ import { useTagGroupContext_unstable } from '../../contexts/TagGroupContext';
 
 const tagButtonAvatarSizeMap = {
   medium: 28,
-  small: 24,
-  'extra-small': 20,
+  small: 20,
+  'extra-small': 16,
 } as const;
 
 const tagButtonAvatarShapeMap = {
diff --git a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts
index c1b93faf1db3ec..e822a2d2124bde 100644
--- a/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/TagButton/useTagButtonStyles.styles.ts
@@ -3,7 +3,12 @@ import type { TagButtonSlots, TagButtonState } from './TagButton.types';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
 import { tokens } from '@fluentui/react-theme';
-import { useResetButtonStyles, useTagBaseStyles } from '../Tag/index';
+import {
+  useIconStyles,
+  useMediaStyles,
+  usePrimaryTextStyles,
+  useSecondaryTextStyles,
+} from '../Tag/useTagStyles.styles';
 
 export const tagButtonClassNames: SlotClassNames<TagButtonSlots> = {
   root: 'fui-TagButton',
@@ -15,153 +20,262 @@ export const tagButtonClassNames: SlotClassNames<TagButtonSlots> = {
   dismissButton: 'fui-TagButton__dismissButton',
 };
 
-const useStyles = makeStyles({
-  root: {
-    // TODO use makeResetStyle when styles are settled
-    display: 'inline-flex',
+const mediumIconSize = '20px';
+const smallIconSize = '16px';
+const extraSmallIconSize = '12px';
 
+const useRootStyles = makeStyles({
+  base: {
+    display: 'inline-flex',
+    alignItems: 'center',
     boxSizing: 'border-box',
-    height: '32px',
     width: 'fit-content',
-    ...shorthands.borderRadius(tokens.borderRadiusMedium),
 
     backgroundColor: tokens.colorNeutralBackground3,
     color: tokens.colorNeutralForeground2,
     ...shorthands.border(tokens.strokeWidthThin, 'solid', tokens.colorTransparentStroke),
   },
-  rootCircular: shorthands.borderRadius(tokens.borderRadiusCircular),
 
-  content: {
+  rounded: shorthands.borderRadius(tokens.borderRadiusMedium),
+  circular: shorthands.borderRadius(tokens.borderRadiusCircular),
+
+  medium: {
+    height: '32px',
+  },
+  small: {
+    height: '24px',
+  },
+  'extra-small': {
+    height: '20px',
+  },
+});
+
+const useContentButtonStyles = makeStyles({
+  base: {
+    // TODO use makeResetStyle when styles are settled
+
+    // reset default button style:
+    color: 'inherit',
+    fontFamily: 'inherit',
+    ...shorthands.padding(0),
+    ...shorthands.borderStyle('none'),
+    appearance: 'button',
+    textAlign: 'unset',
+    backgroundColor: 'transparent',
+
     display: 'inline-grid',
-    gridTemplateRows: '1fr auto auto 1fr',
+    height: '100%',
+    alignItems: 'center',
     gridTemplateAreas: `
-    "media .        "
     "media primary  "
     "media secondary"
-    "media .        "
     `,
-    paddingRight: tokens.spacingHorizontalS,
-
-    ...createCustomFocusIndicatorStyle(
-      {
-        ...shorthands.borderRadius(tokens.borderRadiusMedium),
-        ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-        zIndex: 1,
-      },
-      { enableOutline: true },
-    ),
 
     ':hover': {
       cursor: 'pointer',
     },
   },
-  circularContent: createCustomFocusIndicatorStyle(shorthands.borderRadius(tokens.borderRadiusCircular)),
-  contentWithoutMedia: {
-    paddingLeft: tokens.spacingHorizontalS,
+
+  rounded: createCustomFocusIndicatorStyle(
+    {
+      ...shorthands.borderRadius(tokens.borderRadiusMedium),
+      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+      zIndex: 1,
+    },
+    { enableOutline: true },
+  ),
+  circular: createCustomFocusIndicatorStyle(
+    {
+      ...shorthands.borderRadius(tokens.borderRadiusCircular),
+      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+      zIndex: 1,
+    },
+    { enableOutline: true },
+  ),
+
+  medium: {
+    paddingRight: '7px',
+  },
+  small: {
+    paddingRight: '5px',
   },
-  dismissibleContent: createCustomFocusIndicatorStyle({
+  'extra-small': {
+    paddingRight: '5px',
+  },
+});
+/**
+ * Styles for content slot when TagButton is without leading media/icon
+ */
+const useContentButtonWithoutMediaStyles = makeStyles({
+  medium: {
+    paddingLeft: '7px',
+  },
+  small: {
+    paddingLeft: '5px',
+  },
+  'extra-small': {
+    paddingLeft: '5px',
+  },
+});
+/**
+ * Styles for content slot when TagButton has dismiss button
+ */
+const useDismissibleContentButtonStyles = makeStyles({
+  base: createCustomFocusIndicatorStyle({
     borderTopRightRadius: tokens.borderRadiusNone,
     borderBottomRightRadius: tokens.borderRadiusNone,
   }),
+  medium: {
+    paddingRight: tokens.spacingHorizontalS,
+  },
+  small: {
+    paddingRight: tokens.spacingHorizontalSNudge,
+  },
+  'extra-small': {
+    paddingRight: tokens.spacingHorizontalSNudge,
+  },
+});
+
+const useDismissButtonStyles = makeStyles({
+  base: {
+    // reset default button style:
+    color: 'inherit',
+    fontFamily: 'inherit',
+    ...shorthands.padding(0),
+    ...shorthands.borderStyle('none'),
+    appearance: 'button',
+    textAlign: 'unset',
+    backgroundColor: 'transparent',
 
-  dismissButton: {
     display: 'flex',
+    height: '100%',
     alignItems: 'center',
-    fontSize: '20px',
-    paddingLeft: '6px',
-    paddingRight: '6px',
 
+    // divider:
     ...shorthands.borderLeft(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke1),
-
     borderTopLeftRadius: tokens.borderRadiusNone,
     borderBottomLeftRadius: tokens.borderRadiusNone,
-    ...createCustomFocusIndicatorStyle({
-      ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
-      borderTopLeftRadius: tokens.borderRadiusNone,
-      borderBottomLeftRadius: tokens.borderRadiusNone,
-      borderTopRightRadius: tokens.borderRadiusMedium,
-      borderBottomRightRadius: tokens.borderRadiusMedium,
-    }),
 
     ':hover': {
       cursor: 'pointer',
     },
   },
-  dismissButtonCircular: createCustomFocusIndicatorStyle({
+
+  rounded: createCustomFocusIndicatorStyle({
+    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    borderTopLeftRadius: tokens.borderRadiusNone,
+    borderBottomLeftRadius: tokens.borderRadiusNone,
+    borderTopRightRadius: tokens.borderRadiusMedium,
+    borderBottomRightRadius: tokens.borderRadiusMedium,
+  }),
+  circular: createCustomFocusIndicatorStyle({
+    ...shorthands.outline(tokens.strokeWidthThick, 'solid', tokens.colorStrokeFocus2),
+    borderTopLeftRadius: tokens.borderRadiusNone,
+    borderBottomLeftRadius: tokens.borderRadiusNone,
     borderTopRightRadius: tokens.borderRadiusCircular,
     borderBottomRightRadius: tokens.borderRadiusCircular,
   }),
 
-  // TODO add additional classes for fill/outline appearance, different sizes, and state
-});
-
-const useSmallTagButtonStyles = makeStyles({
-  root: {
-    height: '24px',
+  medium: {
+    fontSize: mediumIconSize,
+    paddingLeft: '5px',
+    paddingRight: '5px',
+  },
+  small: {
+    fontSize: smallIconSize,
+    paddingLeft: '3px',
+    paddingRight: '3px',
+  },
+  'extra-small': {
+    fontSize: extraSmallIconSize,
+    paddingLeft: '5px',
+    paddingRight: '5px',
   },
-  // TODO add additional styles for sizes
 });
 
 /**
  * Apply styling to the TagButton slots based on the state
  */
 export const useTagButtonStyles_unstable = (state: TagButtonState): TagButtonState => {
-  const baseStyles = useTagBaseStyles();
-  const resetButtonStyles = useResetButtonStyles();
-  const styles = useStyles();
-  const smallStyles = useSmallTagButtonStyles();
+  const rootStyles = useRootStyles();
 
-  state.root.className = mergeClasses(
-    tagButtonClassNames.root,
-    styles.root,
-    state.shape === 'circular' && styles.rootCircular,
+  const contentButtonStyles = useContentButtonStyles();
+  const contentButtonWithoutMediaStyles = useContentButtonWithoutMediaStyles();
+  const dismissibleContentButtonStyles = useDismissibleContentButtonStyles();
+
+  const iconStyles = useIconStyles();
+  const mediaStyles = useMediaStyles();
+  const primaryTextStyles = usePrimaryTextStyles();
+  const secondaryTextStyles = useSecondaryTextStyles();
+  const dismissButtonStyles = useDismissButtonStyles();
 
-    state.size === 'small' && smallStyles.root,
+  const { shape, size } = state;
 
+  state.root.className = mergeClasses(
+    tagButtonClassNames.root,
+    rootStyles.base,
+    rootStyles[shape],
+    rootStyles[size],
     state.root.className,
   );
+
   if (state.content) {
     state.content.className = mergeClasses(
       tagButtonClassNames.content,
 
-      resetButtonStyles.resetButton,
-      styles.content,
-      state.shape === 'circular' && styles.circularContent,
-      !state.media && !state.icon && styles.contentWithoutMedia,
-      state.dismissible && styles.dismissibleContent,
+      contentButtonStyles.base,
+      contentButtonStyles[shape],
+      contentButtonStyles[size],
+
+      !state.media && !state.icon && contentButtonWithoutMediaStyles[size],
+      state.dismissible && dismissibleContentButtonStyles.base,
+      state.dismissible && dismissibleContentButtonStyles[size],
 
       state.content.className,
     );
   }
 
   if (state.media) {
-    state.media.className = mergeClasses(tagButtonClassNames.media, baseStyles.media, state.media.className);
+    state.media.className = mergeClasses(
+      tagButtonClassNames.media,
+      mediaStyles.base,
+      mediaStyles[size],
+      state.media.className,
+    );
   }
   if (state.icon) {
-    state.icon.className = mergeClasses(tagButtonClassNames.icon, baseStyles.icon, state.icon.className);
+    state.icon.className = mergeClasses(
+      tagButtonClassNames.icon,
+      iconStyles.base,
+      iconStyles[size],
+      state.icon.className,
+    );
   }
   if (state.primaryText) {
     state.primaryText.className = mergeClasses(
       tagButtonClassNames.primaryText,
-      baseStyles.primaryText,
-      state.secondaryText && baseStyles.primaryTextWithSecondaryText,
+
+      primaryTextStyles.base,
+      primaryTextStyles[size],
+
+      state.secondaryText ? primaryTextStyles.withSecondaryText : primaryTextStyles.withoutSecondaryText,
+
       state.primaryText.className,
     );
   }
   if (state.secondaryText) {
     state.secondaryText.className = mergeClasses(
       tagButtonClassNames.secondaryText,
-      baseStyles.secondaryText,
+      secondaryTextStyles.base,
       state.secondaryText.className,
     );
   }
   if (state.dismissButton) {
     state.dismissButton.className = mergeClasses(
       tagButtonClassNames.dismissButton,
-      resetButtonStyles.resetButton,
-
-      styles.dismissButton,
-      state.shape === 'circular' && styles.dismissButtonCircular,
+      dismissButtonStyles.base,
+      dismissButtonStyles[shape],
+      dismissButtonStyles[size],
       state.dismissButton.className,
     );
   }
diff --git a/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts b/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts
index 384730cbf6e5c7..ecff3d75c06a89 100644
--- a/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts
+++ b/packages/react-components/react-tags/src/components/TagGroup/useTagGroupStyles.styles.ts
@@ -10,27 +10,28 @@ export const tagGroupClassNames: SlotClassNames<TagGroupSlots> = {
 /**
  * Styles for the root slot
  */
-const useStyles = makeStyles({
-  root: {
+const useRootStyles = makeStyles({
+  base: {
     display: 'inline-flex',
+  },
+  medium: {
     columnGap: tokens.spacingHorizontalS,
   },
-  rootSmall: {
+  small: {
     columnGap: tokens.spacingHorizontalSNudge,
   },
+  'extra-small': {
+    columnGap: tokens.spacingHorizontalXS,
+  },
 });
 
 /**
  * Apply styling to the TagGroup slots based on the state
  */
 export const useTagGroupStyles_unstable = (state: TagGroupState): TagGroupState => {
-  const styles = useStyles();
-  state.root.className = mergeClasses(
-    tagGroupClassNames.root,
-    styles.root,
-    state.size === 'small' && styles.rootSmall,
-    state.root.className,
-  );
+  const styles = useRootStyles();
+  const { size } = state;
+  state.root.className = mergeClasses(tagGroupClassNames.root, styles.base, styles[size], state.root.className);
 
   return state;
 };
diff --git a/packages/react-components/react-tags/stories/Tag/TagSize.stories.tsx b/packages/react-components/react-tags/stories/Tag/TagSize.stories.tsx
new file mode 100644
index 00000000000000..55f0b715c70f2c
--- /dev/null
+++ b/packages/react-components/react-tags/stories/Tag/TagSize.stories.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Avatar, makeStyles } from '@fluentui/react-components';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
+
+import { Tag } from '@fluentui/react-tags';
+
+const useContainerStyles = makeStyles({
+  innerWrapper: {
+    alignItems: 'start',
+    columnGap: '10px',
+    display: 'flex',
+  },
+  outerWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: '10px',
+  },
+});
+export const Size = () => {
+  const styles = useContainerStyles();
+  return (
+    <div className={styles.outerWrapper}>
+      <div className={styles.innerWrapper}>
+        <Tag>Medium</Tag>
+        <Tag dismissible media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}>
+          Medium dismissible
+        </Tag>
+        <Tag icon={<CalendarMonthRegular />} shape="circular">
+          Medium circular
+        </Tag>
+      </div>
+      <div className={styles.innerWrapper}>
+        <Tag size="small">Small</Tag>
+
+        <Tag dismissible size="small" media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}>
+          Small dismissible
+        </Tag>
+        <Tag size="small" icon={<CalendarMonthRegular />} shape="circular">
+          Small circular
+        </Tag>
+      </div>
+      <div className={styles.innerWrapper}>
+        <Tag size="extra-small">Extra small</Tag>
+
+        <Tag dismissible size="extra-small" media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}>
+          Extra small dismissible
+        </Tag>
+        <Tag size="extra-small" icon={<CalendarMonthRegular />} shape="circular">
+          Extra small circular
+        </Tag>
+      </div>
+    </div>
+  );
+};
+
+Size.storyName = 'Size';
+Size.parameters = {
+  docs: {
+    description: { story: 'A tag supports `medium`, `small` and `extra-small` size. Default size is `medium`.' },
+  },
+};
diff --git a/packages/react-components/react-tags/stories/Tag/index.stories.tsx b/packages/react-components/react-tags/stories/Tag/index.stories.tsx
index 722990b615cb6b..b6b85183b5b5bc 100644
--- a/packages/react-components/react-tags/stories/Tag/index.stories.tsx
+++ b/packages/react-components/react-tags/stories/Tag/index.stories.tsx
@@ -9,6 +9,7 @@ export { Media } from './TagMedia.stories';
 export { SecondaryText } from './TagSecondaryText.stories';
 export { Dismiss } from './TagDismiss.stories';
 export { Shape } from './TagShape.stories';
+export { Size } from './TagSize.stories';
 
 export default {
   title: 'Preview Components/Tag/Tag',
diff --git a/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx b/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx
new file mode 100644
index 00000000000000..fbf7643d43ccf7
--- /dev/null
+++ b/packages/react-components/react-tags/stories/TagButton/TagButtonSize.stories.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { Avatar, makeStyles } from '@fluentui/react-components';
+import { CalendarMonthRegular } from '@fluentui/react-icons';
+
+import { TagButton } from '@fluentui/react-tags';
+
+const useContainerStyles = makeStyles({
+  innerWrapper: {
+    alignItems: 'start',
+    columnGap: '10px',
+    display: 'flex',
+  },
+  outerWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    rowGap: '10px',
+  },
+});
+export const Size = () => {
+  const styles = useContainerStyles();
+  return (
+    <div className={styles.outerWrapper}>
+      <div className={styles.innerWrapper}>
+        <TagButton>Medium</TagButton>
+        <TagButton dismissible media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}>
+          Medium dismissible
+        </TagButton>
+        <TagButton icon={<CalendarMonthRegular />} shape="circular">
+          Medium circular
+        </TagButton>
+      </div>
+      <div className={styles.innerWrapper}>
+        <TagButton size="small">Small</TagButton>
+
+        <TagButton dismissible size="small" media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}>
+          Small dismissible
+        </TagButton>
+        <TagButton size="small" icon={<CalendarMonthRegular />} shape="circular">
+          Small circular
+        </TagButton>
+      </div>
+      <div className={styles.innerWrapper}>
+        <TagButton size="extra-small">Extra small</TagButton>
+
+        <TagButton dismissible size="extra-small" media={<Avatar name="Katri Athokas" badge={{ status: 'busy' }} />}>
+          Extra small dismissible
+        </TagButton>
+        <TagButton size="extra-small" icon={<CalendarMonthRegular />} shape="circular">
+          Extra small circular
+        </TagButton>
+      </div>
+    </div>
+  );
+};
+
+Size.storyName = 'Size';
+Size.parameters = {
+  docs: {
+    description: { story: 'A TagButton supports `medium`, `small` and `extra-small` size. Default size is `medium`.' },
+  },
+};
diff --git a/packages/react-components/react-tags/stories/TagButton/index.stories.tsx b/packages/react-components/react-tags/stories/TagButton/index.stories.tsx
index 2c588fbd797788..e58d4bdb2a2d10 100644
--- a/packages/react-components/react-tags/stories/TagButton/index.stories.tsx
+++ b/packages/react-components/react-tags/stories/TagButton/index.stories.tsx
@@ -9,6 +9,7 @@ export { Media } from './TagButtonMedia.stories';
 export { SecondaryText } from './TagButtonSecondaryText.stories';
 export { Dismiss } from './TagButtonDismiss.stories';
 export { Shape } from './TagButtonShape.stories';
+export { Size } from './TagButtonSize.stories';
 
 export default {
   title: 'Preview Components/Tag/TagButton',
diff --git a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx
index a1c66a444c89c6..87119309960571 100644
--- a/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx
+++ b/packages/react-components/react-tags/stories/TagGroup/TagGroupSizes.stories.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TagGroup, Tag, TagButton } from '@fluentui/react-tags';
 import { Avatar, makeStyles } from '@fluentui/react-components';
+import { Calendar3DayRegular } from '@fluentui/react-icons';
 import { TagSize } from '../../src/Tag';
 
 const useContainerStyles = makeStyles({
@@ -13,19 +14,22 @@ const useContainerStyles = makeStyles({
 
 export const Sizes = () => {
   const containerStyles = useContainerStyles();
-  // TODO add one more size
-  const sizes: TagSize[] = ['small', 'medium'];
+  const sizes: TagSize[] = ['medium', 'small', 'extra-small'];
   return (
     <div className={containerStyles.root}>
       {sizes.map(size => (
         <div key={size}>
           {`${size}: `}
           <TagGroup size={size}>
-            <Tag media={<Avatar name="Katri Athokas" />} shape="circular">
-              Tag 1
+            <Tag>{size}</Tag>
+            <Tag dismissible media={<Avatar name="Katri Athokas" />}>
+              {size}
             </Tag>
-            <TagButton media={<Avatar name="Katri Athokas" />} shape="circular">
-              Tag 2
+            <Tag icon={<Calendar3DayRegular />} shape="circular">
+              {size}
+            </Tag>
+            <TagButton dismissible icon={<Calendar3DayRegular />}>
+              {size}
             </TagButton>
           </TagGroup>
         </div>
@@ -38,7 +42,8 @@ Sizes.storyName = 'Sizes';
 Sizes.parameters = {
   docs: {
     description: {
-      story: 'A TagGroup supports different sizes',
+      story:
+        'A TagGroup can set default size for all its tags. It supports `medium`, `small` and `extra-small` size. Default value is `medium`.',
     },
   },
 };