diff --git a/addons/toolbars/src/components/MenuToolbar.tsx b/addons/toolbars/src/components/MenuToolbar.tsx
index 404436c9d9b4..b4094b21cba4 100644
--- a/addons/toolbars/src/components/MenuToolbar.tsx
+++ b/addons/toolbars/src/components/MenuToolbar.tsx
@@ -1,6 +1,6 @@
 import React, { FC } from 'react';
 import { useGlobals } from '@storybook/api';
-import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
+import { Icons, IconButton, WithTooltip, TooltipLinkList, TabButton } from '@storybook/components';
 import { NormalizedToolbarArgType } from '../types';
 
 export type MenuToolbarProps = NormalizedToolbarArgType & { id: string };
@@ -15,6 +15,7 @@ export const MenuToolbar: FC<MenuToolbarProps> = ({
   const selectedValue = globals[id];
   const active = selectedValue != null;
   const selectedItem = active && items.find((item) => item.value === selectedValue);
+  const selectedIcon = (selectedItem && selectedItem.icon) || icon;
 
   return (
     <WithTooltip
@@ -39,9 +40,13 @@ export const MenuToolbar: FC<MenuToolbarProps> = ({
       }}
       closeOnClick
     >
-      <IconButton key={name} active={active} title={description}>
-        <Icons icon={(selectedItem && selectedItem.icon) || icon} />
-      </IconButton>
+      {selectedIcon ? (
+        <IconButton key={name} active={active} title={description}>
+          <Icons icon={selectedIcon} />
+        </IconButton>
+      ) : (
+        <TabButton active={active}>{name}</TabButton>
+      )}
     </WithTooltip>
   );
 };