diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
index b7c64f7c6a34bf..df81a14dbcd057 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarControlledToggleButton.stories.tsx
@@ -14,20 +14,10 @@ export const ControlledToggleButton = () => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
+      <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
+      <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
       <ToolbarToggleButton
-        aria-label="Text option - Bold"
-        icon={<TextBold24Regular />}
-        name="textOptions"
-        value="bold"
-      />
-      <ToolbarToggleButton
-        aria-label="Text option - Italic"
-        icon={<TextItalic24Regular />}
-        name="textOptions"
-        value="italic"
-      />
-      <ToolbarToggleButton
-        aria-label="Text option - Underline"
+        aria-label="Underline"
         icon={<TextUnderline24Regular />}
         name="textOptions"
         value="underline"
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
index ed66c91780a718..de1ca97daf817e 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarDefault.stories.tsx
@@ -1,30 +1,23 @@
 import * as React from 'react';
 import {
-  TextBold24Regular,
-  TextItalic24Regular,
-  TextUnderline24Regular,
-  AlertSnooze24Regular,
+  FontIncrease24Regular,
+  FontDecrease24Regular,
+  TextFont24Regular,
   MoreHorizontal24Filled,
 } from '@fluentui/react-icons';
 import { Menu, MenuTrigger, MenuPopover, MenuList, MenuItem } from '@fluentui/react-components';
-import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Default = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton aria-label="Text option - Bold" appearance="primary" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
     <ToolbarDivider />
-    <ToolbarToggleButton
-      aria-label="Snooze Alert Option"
-      name="toggle"
-      value="toggle"
-      icon={<AlertSnooze24Regular />}
-    />
     <Menu>
       <MenuTrigger>
-        <ToolbarButton aria-label="More menu" icon={<MoreHorizontal24Filled />} />
+        <ToolbarButton aria-label="More" icon={<MoreHorizontal24Filled />} />
       </MenuTrigger>
 
       <MenuPopover>
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx
index 7d95d4f7cc1913..5d2520e3b64cbc 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarOverflow.stories.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import {
-  TextBold16Regular,
-  TextItalic16Regular,
-  TextUnderline16Regular,
+  FontDecrease24Regular,
+  TextFont24Regular,
+  FontIncrease24Regular,
   MoreHorizontal20Filled,
 } from '@fluentui/react-icons';
 import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
@@ -29,16 +29,16 @@ export const ToolbarOverflowMenuItem: React.FC<ToolbarOverflowMenuItemProps> = p
     return null;
   }
 
-  if (id.includes('underline')) {
-    return <MenuItem icon={<TextUnderline16Regular />}> Underline</MenuItem>;
+  if (id.includes('increase')) {
+    return <MenuItem icon={<FontIncrease24Regular />}>Increase Font Size</MenuItem>;
   }
 
-  if (id.includes('bold')) {
-    return <MenuItem icon={<TextBold16Regular />}> Bold</MenuItem>;
+  if (id.includes('decrease')) {
+    return <MenuItem icon={<FontDecrease24Regular />}>Decrease Font Size</MenuItem>;
   }
 
-  if (id.includes('italic')) {
-    return <MenuItem icon={<TextItalic16Regular />}> Italic</MenuItem>;
+  if (id.includes('reset')) {
+    return <MenuItem icon={<TextFont24Regular />}>Reset Font Size</MenuItem>;
   }
 
   return <MenuItem {...(rest as MenuItemProps)}>Item {id}</MenuItem>;
@@ -66,7 +66,7 @@ export const OverflowMenu: React.FC<{ itemIds: Array<Array<string>> }> = ({ item
   return (
     <Menu>
       <MenuTrigger disableButtonEnhancement>
-        <Button ref={ref} icon={<MoreHorizontal20Filled />} appearance="subtle" />
+        <Button ref={ref} icon={<MoreHorizontal20Filled />} aria-label="More items" appearance="subtle" />
       </MenuTrigger>
 
       <MenuPopover>
@@ -125,94 +125,94 @@ export const OverflowItems = (props: Partial<ToolbarProps>) => (
     <Overflow padding={90}>
       <Toolbar {...props} size="small">
         <ToolbarOverflowButton
-          overflowId="underline-1"
+          overflowId="increase-1"
           overflowGroupId="1"
           appearance="subtle"
-          aria-label="Italic option ( Group 1 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 1 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-1"
+          overflowId="decrease-1"
           overflowGroupId="1"
           appearance="subtle"
-          aria-label="Bold option ( Group 1 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 1 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowDivider groupId="1" />
 
         <ToolbarOverflowButton
-          overflowId="underline-2"
+          overflowId="increase-2"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Underline option ( Group 2 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 2 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-2"
+          overflowId="decrease-2"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Bold option ( Group 2 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 2 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="italic-1"
+          overflowId="reset-1"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Italic option ( Group 2 )"
-          icon={<TextItalic16Regular />}
+          aria-label="Reset Font Size ( Group 2 )"
+          icon={<TextFont24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="underline-3"
+          overflowId="increase-3"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Underline option ( Group 2 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 2 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-3"
+          overflowId="decrease-3"
           overflowGroupId="2"
           appearance="subtle"
-          aria-label="Bold option ( Group 2 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 2 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowDivider groupId="2" />
 
         <ToolbarOverflowButton
-          overflowId="underline-4"
+          overflowId="increase-4"
           overflowGroupId="3"
           appearance="subtle"
-          aria-label="Underline option ( Group 3 )"
-          icon={<TextUnderline16Regular />}
+          aria-label="Increase Font Size ( Group 3 )"
+          icon={<FontIncrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="bold-4"
+          overflowId="decrease-4"
           overflowGroupId="3"
           appearance="subtle"
-          aria-label="Bold option ( Group 3 )"
-          icon={<TextBold16Regular />}
+          aria-label="Decrease Font Size ( Group 3 )"
+          icon={<FontDecrease24Regular />}
         />
 
         <ToolbarOverflowButton
-          overflowId="italic-2"
+          overflowId="reset-2"
           overflowGroupId="3"
           appearance="subtle"
-          aria-label="Italic option ( Group 3 )"
-          icon={<TextItalic16Regular />}
+          aria-label="Reset Font Size ( Group 3 )"
+          icon={<TextFont24Regular />}
         />
 
         <OverflowMenu
           itemIds={[
-            ['underline-1', 'bold-1'],
-            ['underline-2', 'bold-2', 'italic-1', 'underline-3', 'bold-3'],
-            ['underline-4', 'bold-4', 'italic-2'],
+            ['increase-1', 'decrease-1'],
+            ['increase-2', 'decrease-2', 'reset-1', 'increase-3', 'decrease-3'],
+            ['increase-4', 'decrease-4', 'reset-2'],
           ]}
         />
       </Toolbar>
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
index 86949e4431231f..6f61d549524dcd 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadio.stories.tsx
@@ -4,24 +4,19 @@ import { Toolbar, ToolbarRadioButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Radio = (props: Partial<ToolbarProps>) => (
-  <Toolbar {...props}>
+  <Toolbar
+    {...props}
+    defaultCheckedValues={{
+      textOptions: ['center'],
+    }}
+  >
+    <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
     <ToolbarRadioButton
-      aria-label="Radio Option - Align left"
-      name="text-style"
-      value="italic"
-      icon={<AlignLeft24Regular />}
-    />
-    <ToolbarRadioButton
-      aria-label="Radio Option - Align Center"
-      name="text-style"
-      value="bold"
+      aria-label="Align Center"
+      name="textOptions"
+      value="center"
       icon={<AlignCenterHorizontal24Regular />}
     />
-    <ToolbarRadioButton
-      aria-label="Radio Option - Align Right"
-      name="text-style"
-      value="underline"
-      icon={<AlignRight24Regular />}
-    />
+    <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
index e4ee92e14503eb..9b8503b00b540a 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarRadioControlled.stories.tsx
@@ -5,7 +5,7 @@ import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const ControlledRadio = (props: Partial<ToolbarProps>) => {
   const [checkedValues, setCheckedValues] = React.useState<Record<string, string[]>>({
-    edit: ['italic', 'bold'],
+    textOptions: ['center'],
   });
 
   const onChange: ToolbarProps['onCheckedValueChange'] = (e, { name, checkedItems }) => {
@@ -16,24 +16,14 @@ export const ControlledRadio = (props: Partial<ToolbarProps>) => {
 
   return (
     <Toolbar checkedValues={checkedValues} onCheckedValueChange={onChange}>
+      <ToolbarRadioButton aria-label="Align left" name="textOptions" value="left" icon={<AlignLeft24Regular />} />
       <ToolbarRadioButton
-        aria-label="Radio Option - Align left"
-        name="text-style"
-        value="italic"
-        icon={<AlignLeft24Regular />}
-      />
-      <ToolbarRadioButton
-        aria-label="Radio Option - Align Center"
-        name="text-style"
-        value="bold"
+        aria-label="Align Center"
+        name="textOptions"
+        value="center"
         icon={<AlignCenterHorizontal24Regular />}
       />
-      <ToolbarRadioButton
-        aria-label="Radio Option - Align Right"
-        name="text-style"
-        value="underline"
-        icon={<AlignRight24Regular />}
-      />
+      <ToolbarRadioButton aria-label="Align Right" name="textOptions" value="right" icon={<AlignRight24Regular />} />
     </Toolbar>
   );
 };
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
index ec7cffdaef4392..c7458febc493cb 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSmall.stories.tsx
@@ -1,24 +1,12 @@
 import * as React from 'react';
-import {
-  TextBold16Regular,
-  TextItalic16Regular,
-  TextUnderline16Regular,
-  AlertSnooze16Regular,
-} from '@fluentui/react-icons';
-import { Toolbar, ToolbarButton, ToolbarDivider, ToolbarToggleButton } from '@fluentui/react-toolbar';
+import { FontIncrease24Regular, FontDecrease24Regular, TextFont24Regular } from '@fluentui/react-icons';
+import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Small = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold16Regular />} />
-    <ToolbarButton aria-label="Text Options - Italic" icon={<TextItalic16Regular />} />
-    <ToolbarButton aria-label="Text Options - Underline" icon={<TextUnderline16Regular />} />
-    <ToolbarDivider />
-    <ToolbarToggleButton
-      aria-label="Toggle Option - Alert Snooze"
-      name="toggle"
-      value="toggle"
-      icon={<AlertSnooze16Regular />}
-    />
+    <ToolbarButton aria-label="Increase Font Size" appearance="primary" icon={<FontIncrease24Regular />} />
+    <ToolbarButton aria-label="Decrease Font Size" icon={<FontDecrease24Regular />} />
+    <ToolbarButton aria-label="Reset Font Size" icon={<TextFont24Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
index 0cd05053107141..15565aea4c0156 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarSubtle.stories.tsx
@@ -1,12 +1,17 @@
 import * as React from 'react';
 import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarToggleButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Subtle = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props}>
-    <ToolbarButton aria-label="Text Options - Bold" appearance="subtle" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text Options - Italic" appearance="subtle" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text Options - Underline" appearance="subtle" icon={<TextUnderline24Regular />} />
+    <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
+    <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
+    <ToolbarToggleButton
+      aria-label="Underline"
+      icon={<TextUnderline24Regular />}
+      name="textOptions"
+      value="underline"
+    />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
index 101631b357e4e2..6696758d4375a5 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarVertical.stories.tsx
@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { TextBold24Regular, TextItalic24Regular, TextUnderline24Regular } from '@fluentui/react-icons';
-import { Toolbar, ToolbarButton } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarToggleButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 
 export const Vertical = (props: Partial<ToolbarProps>) => (
   <Toolbar vertical {...props}>
-    <ToolbarButton aria-label="Text option - Bold" icon={<TextBold24Regular />} />
-    <ToolbarButton aria-label="Text option - Italic" icon={<TextItalic24Regular />} />
-    <ToolbarButton aria-label="Text option - Underline" icon={<TextUnderline24Regular />} />
+    <ToolbarToggleButton name="text" value="bold" aria-label="Bold" icon={<TextBold24Regular />} />
+    <ToolbarToggleButton name="text" value="italic" aria-label="Italic" icon={<TextItalic24Regular />} />
+    <ToolbarToggleButton name="text" value="underline" aria-label="Underline" icon={<TextUnderline24Regular />} />
   </Toolbar>
 );
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
index 2f379a241328e5..74368a6c0ee473 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithPopover.stories.tsx
@@ -2,42 +2,82 @@ import * as React from 'react';
 import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Popover, PopoverSurface, PopoverTrigger, Button } from '@fluentui/react-components';
-import { CalendarMonthRegular, Accessibility24Filled } from '@fluentui/react-icons';
+import { MathFormatLinear24Regular, Image24Regular, Table24Filled } from '@fluentui/react-icons';
 
-export const WithPopover = (props: Partial<ToolbarProps>) => (
-  <Toolbar {...props} size="small">
-    <Popover withArrow>
-      <PopoverTrigger disableButtonEnhancement>
-        <ToolbarButton appearance="primary">See more...</ToolbarButton>
-      </PopoverTrigger>
-      <PopoverSurface>
-        <div>
-          <h3>Popover content</h3>
-          <Button>Action</Button>
-        </div>
-      </PopoverSurface>
-    </Popover>
-    <ToolbarDivider />
-    <Popover withArrow>
-      <PopoverTrigger disableButtonEnhancement>
-        <ToolbarButton aria-label="Popover trigger - Calendar" icon={<CalendarMonthRegular />} />
-      </PopoverTrigger>
-      <PopoverSurface>
-        <div>
-          <h3>Popover content</h3>
-          <Button>Action</Button>
-        </div>
-      </PopoverSurface>
-    </Popover>
-    <Popover withArrow>
-      <PopoverTrigger disableButtonEnhancement>
-        <ToolbarButton aria-label="Popover trigger - Accessibility" icon={<Accessibility24Filled />} />
-      </PopoverTrigger>
-      <PopoverSurface>
-        <div>
-          <h3>Popover content - Accessibility</h3> <Button>Action</Button>
-        </div>
-      </PopoverSurface>
-    </Popover>
-  </Toolbar>
-);
+export const WithPopover = (props: Partial<ToolbarProps>) => {
+  const [open, setOpen] = React.useState<'first' | 'second' | 'third' | 'fourth' | undefined>();
+
+  return (
+    <Toolbar {...props} size="small">
+      <Popover
+        withArrow
+        trapFocus
+        open={open === 'first'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'first' : undefined)}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton aria-label="Insert image" icon={<Image24Regular />} />
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Insert Image</h3>
+            <Button>Example 1</Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+      <Popover
+        withArrow
+        trapFocus
+        open={open === 'second'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'second' : undefined)}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton appearance="primary" icon={<Table24Filled />} aria-label="Insert Table" />
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Insert Table</h3>
+            <Button>Example 2</Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+      <Popover
+        withArrow
+        trapFocus
+        open={open === 'third'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'third' : undefined)}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton aria-label="Insert Formula" icon={<MathFormatLinear24Regular />} />
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Insert Formula</h3>
+            <Button>Example 3</Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+      <ToolbarDivider />
+      <Popover
+        withArrow
+        trapFocus
+        open={open === 'fourth'}
+        onOpenChange={(_, data) => setOpen(data.open ? 'fourth' : undefined)}
+      >
+        <PopoverTrigger disableButtonEnhancement>
+          <ToolbarButton>Quick Actions</ToolbarButton>
+        </PopoverTrigger>
+        <PopoverSurface>
+          <div>
+            <h3>Quick Actions</h3>
+            <Button>Example 4</Button>
+            <Button onClick={() => setOpen(undefined)}>Close</Button>
+          </div>
+        </PopoverSurface>
+      </Popover>
+    </Toolbar>
+  );
+};
diff --git a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
index ddc2434481a3bf..4283413c47f561 100644
--- a/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
+++ b/packages/react-components/react-toolbar/src/stories/Toolbar/ToolbarWithTooltip.stories.tsx
@@ -1,20 +1,33 @@
 import * as React from 'react';
-import { Toolbar, ToolbarButton, ToolbarDivider } from '@fluentui/react-toolbar';
+import { Toolbar, ToolbarToggleButton, ToolbarDivider, ToolbarButton } from '@fluentui/react-toolbar';
 import type { ToolbarProps } from '@fluentui/react-toolbar';
 import { Tooltip } from '@fluentui/react-components';
-import { CalendarMonthRegular, TextBold24Regular, TextItalic24Regular } from '@fluentui/react-icons';
+import {
+  TextUnderline24Regular,
+  TextBold24Regular,
+  TextItalic24Regular,
+  Highlight24Filled,
+} from '@fluentui/react-icons';
 
 export const WithTooltip = (props: Partial<ToolbarProps>) => (
   <Toolbar {...props} size="small">
-    <Tooltip content="Content - Makes text bold" relationship="label" withArrow>
-      <ToolbarButton aria-label="Text Options - Bold" appearance="primary" icon={<TextBold24Regular />} />
+    <Tooltip content="Makes selected text Bold" relationship="description" withArrow>
+      <ToolbarToggleButton aria-label="Bold" icon={<TextBold24Regular />} name="textOptions" value="bold" />
     </Tooltip>
-    <ToolbarDivider />
-    <Tooltip content="Tooltip Content - Show something here" relationship="label" withArrow>
-      <ToolbarButton aria-label="Calendar" icon={<CalendarMonthRegular />} />
+    <Tooltip content="Makes selected text Italic" relationship="description" withArrow>
+      <ToolbarToggleButton aria-label="Italic" icon={<TextItalic24Regular />} name="textOptions" value="italic" />
+    </Tooltip>
+    <Tooltip content="Makes selected text Underline" relationship="description" withArrow>
+      <ToolbarToggleButton
+        aria-label="Underline"
+        icon={<TextUnderline24Regular />}
+        name="textOptions"
+        value="underline"
+      />
     </Tooltip>
-    <Tooltip content="Tooltip Content - Makes text Italic" relationship="label" withArrow>
-      <ToolbarButton aria-label="Italic Option" icon={<TextItalic24Regular />} />
+    <ToolbarDivider />
+    <Tooltip content="Highlights the selected text" relationship="description" withArrow>
+      <ToolbarButton aria-label="Highlight" icon={<Highlight24Filled />} />
     </Tooltip>
   </Toolbar>
 );