diff --git a/docs/reference/generated/toolbar-button.json b/docs/reference/generated/toolbar-button.json
new file mode 100644
index 0000000000..36e9d3fa2c
--- /dev/null
+++ b/docs/reference/generated/toolbar-button.json
@@ -0,0 +1,26 @@
+{
+  "name": "ToolbarButton",
+  "description": "A button that can be used as-is or as a trigger for other components.\nRenders a `<button>` element.",
+  "props": {
+    "focusableWhenDisabled": {
+      "type": "boolean",
+      "default": "true",
+      "description": "When `true` the item remains focuseable when disabled."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "When `true` the item is disabled."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toolbar-group.json b/docs/reference/generated/toolbar-group.json
new file mode 100644
index 0000000000..1efcc69711
--- /dev/null
+++ b/docs/reference/generated/toolbar-group.json
@@ -0,0 +1,21 @@
+{
+  "name": "ToolbarGroup",
+  "description": "Groups several toolbar items or toggles.\nRenders a `<div>` element.",
+  "props": {
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "When `true` all toolbar items in the group are disabled."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toolbar-link.json b/docs/reference/generated/toolbar-link.json
new file mode 100644
index 0000000000..f8ee139f7f
--- /dev/null
+++ b/docs/reference/generated/toolbar-link.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToolbarLink",
+  "description": "A link component.\nRenders a `<a>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toolbar-root.json b/docs/reference/generated/toolbar-root.json
new file mode 100644
index 0000000000..c290ab1a45
--- /dev/null
+++ b/docs/reference/generated/toolbar-root.json
@@ -0,0 +1,31 @@
+{
+  "name": "ToolbarRoot",
+  "description": "A container for grouping a set of controls, such as buttons, toggle groups, or menus.\nRenders a `<div>` element.",
+  "props": {
+    "cols": {
+      "type": "number",
+      "default": "1",
+      "description": "The number of columns. When greater than 1, the toolbar is arranged into\na grid."
+    },
+    "loop": {
+      "type": "boolean",
+      "default": "true",
+      "description": "If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached."
+    },
+    "orientation": {
+      "type": "'horizontal' | 'vertical'",
+      "default": "'horizontal'",
+      "description": "The orientation of the toolbar."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/reference/generated/toolbar-separator.json b/docs/reference/generated/toolbar-separator.json
new file mode 100644
index 0000000000..5a906ca048
--- /dev/null
+++ b/docs/reference/generated/toolbar-separator.json
@@ -0,0 +1,16 @@
+{
+  "name": "ToolbarSeparator",
+  "description": "A separator element accessible to screen readers.\nRenders a `<div>` element.",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "CSS class applied to the element, or a function that\nreturns a class based on the component’s state."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "Allows you to replace the component’s HTML element\nwith a different tag, or compose it with another component.\n\nAccepts a `ReactElement` or a function that returns the element to render."
+    }
+  },
+  "dataAttributes": {},
+  "cssVariables": {}
+}
diff --git a/docs/src/app/(private)/experiments/toolbar/_icons.tsx b/docs/src/app/(private)/experiments/toolbar/_icons.tsx
new file mode 100644
index 0000000000..5394cdcdc8
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toolbar/_icons.tsx
@@ -0,0 +1,202 @@
+'use client';
+import * as React from 'react';
+
+export default function Nothing() {
+  return <div>This is just a dummy file to hold icons</div>;
+}
+
+export function AlignLeftIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="17" y1="10" x2="3" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="21" y1="14" x2="3" y2="14" />
+      <line x1="17" y1="18" x2="3" y2="18" />
+    </svg>
+  );
+}
+
+export function AlignCenterIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="18" y1="10" x2="6" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="21" y1="14" x2="3" y2="14" />
+      <line x1="18" y1="18" x2="6" y2="18" />
+    </svg>
+  );
+}
+
+export function AlignRightIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="21" y1="10" x2="7" y2="10" />
+      <line x1="21" y1="6" x2="3" y2="6" />
+      <line x1="21" y1="14" x2="3" y2="14" />
+      <line x1="21" y1="18" x2="7" y2="18" />
+    </svg>
+  );
+}
+
+export function BoldIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+      <path d="M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" />
+    </svg>
+  );
+}
+
+export function ItalicsIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <line x1="19" y1="4" x2="10" y2="4" />
+      <line x1="14" y1="20" x2="5" y2="20" />
+      <line x1="15" y1="4" x2="9" y2="20" />
+    </svg>
+  );
+}
+
+export function UnderlineIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M6 3v7a6 6 0 0 0 6 6 6 6 0 0 0 6-6V3" />
+      <line x1="4" y1="21" x2="20" y2="21" />
+    </svg>
+  );
+}
+
+export function ArrowSvg(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="20" height="10" viewBox="0 0 20 10" fill="none" {...props}>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        fill={props.fill ?? 'canvas'}
+      />
+      <path d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z" />
+      <path d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z" />
+    </svg>
+  );
+}
+
+export function ChevronUpDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      width="8"
+      height="12"
+      viewBox="0 0 8 12"
+      fill="none"
+      stroke="currentcolor"
+      strokeWidth="1.5"
+      {...props}
+    >
+      <path d="M0.5 4.5L4 1.5L7.5 4.5" />
+      <path d="M0.5 7.5L4 10.5L7.5 7.5" />
+    </svg>
+  );
+}
+
+export function CheckIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg fill="currentcolor" width="10" height="10" viewBox="0 0 10 10" {...props}>
+      <path d="M9.1603 1.12218C9.50684 1.34873 9.60427 1.81354 9.37792 2.16038L5.13603 8.66012C5.01614 8.8438 4.82192 8.96576 4.60451 8.99384C4.3871 9.02194 4.1683 8.95335 4.00574 8.80615L1.24664 6.30769C0.939709 6.02975 0.916013 5.55541 1.19372 5.24822C1.47142 4.94102 1.94536 4.91731 2.2523 5.19524L4.36085 7.10461L8.12299 1.33999C8.34934 0.993152 8.81376 0.895638 9.1603 1.12218Z" />
+    </svg>
+  );
+}
+
+export function MoreHorizontalIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <circle cx="12" cy="12" r="1" />
+      <circle cx="19" cy="12" r="1" />
+      <circle cx="5" cy="12" r="1" />
+    </svg>
+  );
+}
+
+export function ChevronDownIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+      <path d="M1 3.5L5 7.5L9 3.5" stroke="currentcolor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function ChevronRightIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="10" height="10" viewBox="0 0 10 10" fill="none" {...props}>
+      <path d="M3.5 9L7.5 5L3.5 1" stroke="currentcolor" strokeWidth="1.5" />
+    </svg>
+  );
+}
+
+export function MessageCircleIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" />
+    </svg>
+  );
+}
+
+export function MousePointerIcon(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      {...props}
+    >
+      <path d="M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z" />
+      <path d="M13 13l6 6" />
+    </svg>
+  );
+}
diff --git a/docs/src/app/(private)/experiments/toolbar/basic.tsx b/docs/src/app/(private)/experiments/toolbar/basic.tsx
new file mode 100644
index 0000000000..50dac55b16
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toolbar/basic.tsx
@@ -0,0 +1,85 @@
+'use client';
+import * as React from 'react';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import s from './toolbar.module.css';
+import selectClasses from '../../../(public)/(content)/react/components/select/demos/hero/css-modules/index.module.css';
+import menuClasses from '../../../(public)/(content)/react/components/menu/demos/hero/css-modules/index.module.css';
+import '../../../../demo-theme.css';
+
+const DISABLED = false;
+
+const styles = {
+  toolbar: s,
+  select: selectClasses,
+  menu: menuClasses,
+};
+
+const TEXT = `Shows the basic anatomy:
+- Toolbar.Root
+- Toolbar.Button
+- Toolbar.Link
+- Toolbar.Separator
+- Toolbar.Group
+`;
+
+export default function App() {
+  return (
+    <React.Fragment>
+      <a
+        className={styles.toolbar.a}
+        href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <h3 className={styles.toolbar.h3}>Toolbar pattern</h3>
+      </a>
+      <div className={styles.toolbar.Wrapper}>
+        <Toolbar.Root className={styles.toolbar.Root}>
+          <Toolbar.Button
+            disabled={DISABLED}
+            className={styles.toolbar.Button}
+            onClick={() => console.log('clicked a regular toolbar button')}
+          >
+            Toolbar.Button
+          </Toolbar.Button>
+
+          <Toolbar.Link
+            className={styles.toolbar.Button}
+            href="https://base-ui.com"
+            target="_blank"
+          >
+            Visit base-ui.com
+          </Toolbar.Link>
+
+          <Toolbar.Separator className={styles.toolbar.Separator} />
+
+          <Toolbar.Group className={styles.toolbar.ToggleGroup}>
+            <Toolbar.Button
+              disabled={DISABLED}
+              className={styles.toolbar.Button}
+              onClick={() => console.log('clicked button 1 inside a group')}
+              style={{ marginRight: '0.5rem' }}
+            >
+              Toolbar.Button in a Group
+            </Toolbar.Button>
+
+            <Toolbar.Button
+              disabled={DISABLED}
+              className={styles.toolbar.Button}
+              onClick={() => console.log('clicked button 2 inside a group')}
+            >
+              Toolbar.Button in a Group
+            </Toolbar.Button>
+          </Toolbar.Group>
+        </Toolbar.Root>
+        <textarea
+          className={styles.toolbar.Textarea}
+          name=""
+          id=""
+          rows={8}
+          defaultValue={TEXT}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/app/(private)/experiments/toolbar/text-editor.tsx b/docs/src/app/(private)/experiments/toolbar/text-editor.tsx
new file mode 100644
index 0000000000..fcf03cd040
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toolbar/text-editor.tsx
@@ -0,0 +1,337 @@
+'use client';
+import * as React from 'react';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Tooltip } from '@base-ui-components/react/tooltip';
+import { Toggle } from '@base-ui-components/react/toggle';
+import { ToggleGroup } from '@base-ui-components/react/toggle-group';
+import { Select } from '@base-ui-components/react/select';
+import { Menu } from '@base-ui-components/react/menu';
+import {
+  SettingsMetadata,
+  useExperimentSettings,
+} from '../../../../components/Experiments/SettingsPanel';
+import toolbarClasses from './toolbar.module.css';
+import selectClasses from '../../../(public)/(content)/react/components/select/demos/hero/css-modules/index.module.css';
+import tooltipClasses from '../../../(public)/(content)/react/components/tooltip/demos/hero/css-modules/index.module.css';
+import menuClasses from '../../../(public)/(content)/react/components/menu/demos/submenu/css-modules/index.module.css';
+import '../../../../demo-theme.css';
+import {
+  BoldIcon,
+  ItalicsIcon,
+  UnderlineIcon,
+  AlignLeftIcon,
+  AlignCenterIcon,
+  AlignRightIcon,
+  ArrowSvg,
+  ChevronUpDownIcon,
+  CheckIcon,
+  MoreHorizontalIcon,
+  ChevronRightIcon,
+} from './_icons';
+
+interface Settings extends Record<string, boolean> {}
+
+export const settingsMetadata: SettingsMetadata<Settings> = {
+  selectDisabled: {
+    type: 'boolean',
+    label: 'Select disabled',
+  },
+  boldDisabled: {
+    type: 'boolean',
+    label: 'Bold disabled',
+  },
+  italicsDisabled: {
+    type: 'boolean',
+    label: 'Italics disabled',
+  },
+  underlineDisabled: {
+    type: 'boolean',
+    label: 'Underline disabled',
+  },
+  menuDisabled: {
+    type: 'boolean',
+    label: 'Menu disabled',
+  },
+  toolbarDisabled: {
+    type: 'boolean',
+    label: 'Everything disabled',
+  },
+};
+
+const TEXT = `This is a POC for an API that just places Select,
+Menu, ToggleGroup/Toggle into Toolbar as-is without any explicit
+use of the render prop
+
+* Tooltip.Trigger uses the render prop but it's not related to Toolbar
+`;
+
+const styles = {
+  toolbar: toolbarClasses,
+  tooltip: tooltipClasses,
+  select: selectClasses,
+  menu: menuClasses,
+};
+
+function classNames(...c: Array<string | undefined | null | false>) {
+  return c.filter(Boolean).join(' ');
+}
+
+function renderToggleWithTooltip(args: {
+  key: string;
+  label: string;
+  icon: (props: React.ComponentProps<'svg'>) => React.JSX.Element;
+  disabled?: boolean;
+}) {
+  const { key, label, icon: Icon, disabled = false } = args;
+  return (
+    <Tooltip.Root key={key}>
+      <Tooltip.Trigger
+        render={
+          <Toggle
+            aria-label={label}
+            value={key}
+            className={styles.toolbar.Toggle}
+            disabled={disabled}
+          >
+            <Icon className={styles.toolbar.Icon} />
+          </Toggle>
+        }
+      />
+      <Tooltip.Portal>
+        <Tooltip.Positioner sideOffset={10}>
+          <Tooltip.Popup className={styles.tooltip.Popup}>
+            <Tooltip.Arrow
+              className={classNames(
+                styles.tooltip.Arrow,
+                styles.toolbar.TooltipArrow,
+              )}
+            >
+              <ArrowSvg className={styles.toolbar.ArrowSvg} />
+            </Tooltip.Arrow>
+            {label}
+          </Tooltip.Popup>
+        </Tooltip.Positioner>
+      </Tooltip.Portal>
+    </Tooltip.Root>
+  );
+}
+
+export default function App() {
+  const { settings } = useExperimentSettings<Settings>();
+  return (
+    <React.Fragment>
+      <a
+        className={styles.toolbar.a}
+        href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <h3 className={styles.toolbar.h3}>Toolbar pattern</h3>
+      </a>
+      <div className={styles.toolbar.Wrapper}>
+        <Tooltip.Provider>
+          <Toolbar.Root className={styles.toolbar.Root}>
+            <Select.Root
+              defaultValue="sans"
+              disabled={settings.toolbarDisabled || settings.selectDisabled}
+            >
+              <Select.Trigger
+                disabled={settings.toolbarDisabled || settings.selectDisabled}
+                className={styles.select.Select}
+              >
+                <Select.Value placeholder="Sans-serif" />
+                <Select.Icon className={styles.select.SelectIcon}>
+                  <ChevronUpDownIcon />
+                </Select.Icon>
+              </Select.Trigger>
+              <Select.Portal>
+                <Select.Positioner
+                  className={styles.select.Positioner}
+                  sideOffset={8}
+                >
+                  <Select.Popup
+                    className={styles.select.Popup}
+                    style={{ backgroundColor: 'var(--color-gray-50)' }}
+                  >
+                    <Select.Arrow className={styles.select.Arrow}>
+                      <ArrowSvg className={styles.toolbar.ArrowSvg} />
+                    </Select.Arrow>
+                    <Select.Item className={styles.select.Item} value="sans">
+                      <Select.ItemIndicator className={styles.select.ItemIndicator}>
+                        <CheckIcon className={styles.select.ItemIndicatorIcon} />
+                      </Select.ItemIndicator>
+                      <Select.ItemText className={styles.select.ItemText}>
+                        Sans-serif
+                      </Select.ItemText>
+                    </Select.Item>
+                    <Select.Item className={styles.select.Item} value="serif">
+                      <Select.ItemIndicator className={styles.select.ItemIndicator}>
+                        <CheckIcon className={styles.select.ItemIndicatorIcon} />
+                      </Select.ItemIndicator>
+                      <Select.ItemText className={styles.select.ItemText}>
+                        Serif
+                      </Select.ItemText>
+                    </Select.Item>
+                    <Select.Item className={styles.select.Item} value="mono">
+                      <Select.ItemIndicator className={styles.select.ItemIndicator}>
+                        <CheckIcon className={styles.select.ItemIndicatorIcon} />
+                      </Select.ItemIndicator>
+                      <Select.ItemText className={styles.select.ItemText}>
+                        Monospace
+                      </Select.ItemText>
+                    </Select.Item>
+                    <Select.Item className={styles.select.Item} value="cursive">
+                      <Select.ItemIndicator className={styles.select.ItemIndicator}>
+                        <CheckIcon className={styles.select.ItemIndicatorIcon} />
+                      </Select.ItemIndicator>
+                      <Select.ItemText className={styles.select.ItemText}>
+                        Cursive
+                      </Select.ItemText>
+                    </Select.Item>
+                  </Select.Popup>
+                </Select.Positioner>
+              </Select.Portal>
+            </Select.Root>
+
+            <Toolbar.Separator className={styles.toolbar.Separator} />
+
+            <ToggleGroup
+              toggleMultiple
+              defaultValue={[]}
+              className={styles.toolbar.ToggleGroup}
+            >
+              {[
+                {
+                  key: 'bold',
+                  label: 'Bold',
+                  icon: BoldIcon,
+                  disabled: settings.toolbarDisabled || settings.boldDisabled,
+                },
+                {
+                  key: 'italics',
+                  label: 'Italics',
+                  icon: ItalicsIcon,
+                  disabled: settings.toolbarDisabled || settings.italicsDisabled,
+                },
+                {
+                  key: 'underline',
+                  label: 'Underline',
+                  icon: UnderlineIcon,
+                  disabled: settings.toolbarDisabled || settings.underlineDisabled,
+                },
+              ].map(renderToggleWithTooltip)}
+            </ToggleGroup>
+
+            <Toolbar.Separator className={styles.toolbar.Separator} />
+
+            <Toolbar.Group
+              render={<ToggleGroup />}
+              defaultValue={['left']}
+              className={styles.toolbar.ToggleGroup}
+              disabled={settings.toolbarDisabled}
+            >
+              {[
+                {
+                  key: 'left',
+                  label: 'Align left',
+                  icon: AlignLeftIcon,
+                  disabled: settings.toolbarDisabled,
+                },
+                {
+                  key: 'center',
+                  label: 'Align center',
+                  icon: AlignCenterIcon,
+                  disabled: settings.toolbarDisabled,
+                },
+                {
+                  key: 'right',
+                  label: 'Align right',
+                  icon: AlignRightIcon,
+                  disabled: settings.toolbarDisabled,
+                },
+              ].map(renderToggleWithTooltip)}
+            </Toolbar.Group>
+
+            <Toolbar.Separator className={styles.toolbar.Separator} />
+
+            <Menu.Root disabled={settings.toolbarDisabled || settings.menuDisabled}>
+              <Menu.Trigger className={styles.toolbar.More}>
+                <MoreHorizontalIcon className={styles.toolbar.Icon} />
+              </Menu.Trigger>
+              <Menu.Portal>
+                <Menu.Positioner
+                  className={styles.menu.Positioner}
+                  align="start"
+                  side="inline-end"
+                  sideOffset={8}
+                >
+                  <Menu.Popup
+                    className={styles.menu.Popup}
+                    style={{ backgroundColor: 'canvas' }}
+                  >
+                    <Menu.Arrow
+                      className={styles.menu.Arrow}
+                      style={{
+                        color: 'canvas',
+                        transform: 'rotate(-90deg) translateY(-124%)',
+                      }}
+                    >
+                      <ArrowSvg className={styles.toolbar.ArrowSvg} />
+                    </Menu.Arrow>
+                    <Menu.Item className={styles.menu.Item}>Help</Menu.Item>
+                    <Menu.Item className={styles.menu.Item}>
+                      Keyboard Shortcuts
+                    </Menu.Item>
+                    <Menu.Item className={styles.menu.Item}>Release Notes</Menu.Item>
+                    <Menu.Separator className={styles.menu.Separator} />
+                    <Menu.Root>
+                      <Menu.SubmenuTrigger className={styles.menu.SubmenuTrigger}>
+                        Debug
+                        <ChevronRightIcon />
+                      </Menu.SubmenuTrigger>
+                      <Menu.Portal>
+                        <Menu.Positioner
+                          className={styles.menu.Positioner}
+                          alignOffset={-4}
+                          sideOffset={-4}
+                        >
+                          <Menu.Popup className={styles.menu.Popup}>
+                            <Menu.Item className={styles.menu.Item}>
+                              Show debug log
+                            </Menu.Item>
+                            <Menu.Item className={styles.menu.Item}>
+                              Show network log
+                            </Menu.Item>
+                            <Menu.Item className={styles.menu.Item}>
+                              Show all logs
+                            </Menu.Item>
+                            <Menu.Separator className={styles.menu.Separator} />
+                            <Menu.Item className={styles.menu.Item}>
+                              Clear cache
+                            </Menu.Item>
+                            <Menu.Item className={styles.menu.Item}>
+                              Clear local storage
+                            </Menu.Item>
+                          </Menu.Popup>
+                        </Menu.Positioner>
+                      </Menu.Portal>
+                    </Menu.Root>
+                    <Menu.Separator className={styles.menu.Separator} />
+                    <Menu.Item className={styles.menu.Item}>Log Out</Menu.Item>
+                  </Menu.Popup>
+                </Menu.Positioner>
+              </Menu.Portal>
+            </Menu.Root>
+          </Toolbar.Root>
+        </Tooltip.Provider>
+        <textarea
+          className={styles.toolbar.Textarea}
+          name=""
+          id=""
+          rows={10}
+          defaultValue={TEXT}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/app/(private)/experiments/toolbar/toolbar.module.css b/docs/src/app/(private)/experiments/toolbar/toolbar.module.css
new file mode 100644
index 0000000000..6b4e5f431c
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toolbar/toolbar.module.css
@@ -0,0 +1,242 @@
+.Root {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  padding: 0.5rem 0.6rem;
+  text-wrap: nowrap;
+}
+
+.Grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  padding: 0.5rem;
+}
+
+/* disabled buttons + focusableWhenDisabled */
+.Root [type='button'][data-disabled],
+.Root button[data-disabled] {
+  color: color-mix(in srgb, currentColor 30%, transparent) !important;
+  cursor: not-allowed !important;
+}
+
+.Separator[data-orientation='vertical'] {
+  width: 1px;
+  align-self: stretch;
+  margin-block: 4px;
+  background-color: var(--color-gray-300);
+}
+
+.Separator[data-orientation='horizontal'] {
+  height: 1px;
+  align-self: stretch;
+  /*  margin-block: 2px;*/
+  background-color: var(--color-gray-300);
+  margin-block: 24px;
+}
+
+.Link {
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--color-gray-900);
+  text-decoration-color: var(--color-gray-400);
+  text-decoration-thickness: 1px;
+  text-decoration-line: none;
+  text-underline-offset: 2px;
+
+  @media (hover: hover) {
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  &:focus-visible {
+    border-radius: 0.125rem;
+    outline: 2px solid var(--color-blue);
+    text-decoration-line: none;
+  }
+}
+
+.Button {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 2.5rem;
+  padding-inline: 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  background-color: transparent;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  &:focus-visible {
+    background-color: transparent;
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-200);
+  }
+}
+
+/* ToggleGroup  */
+.ToggleGroup {
+  display: flex;
+  gap: 1px;
+  border-radius: 0.375rem;
+  padding: 0.125rem;
+}
+
+.Toggle {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  padding: 0;
+  margin: 0;
+  outline: 0;
+  border: 0;
+  border-radius: 0.25rem;
+  background-color: transparent;
+  color: var(--color-gray-600);
+  user-select: none;
+
+  &:focus-visible {
+    background-color: transparent;
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-200);
+  }
+
+  &[data-pressed] {
+    background-color: var(--color-gray-100);
+    color: var(--color-gray-900);
+  }
+}
+
+.Icon {
+  width: 1rem;
+  height: 1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Menu  */
+.More {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 2.5rem;
+  padding: 0 0.875rem;
+  margin: 0;
+  outline: 0;
+  border: 1px solid var(--color-gray-200);
+  border-radius: 0.375rem;
+  background-color: var(--color-gray-50);
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.5rem;
+  color: var(--color-gray-900);
+  user-select: none;
+
+  @media (hover: hover) {
+    &:hover {
+      background-color: var(--color-gray-100);
+    }
+  }
+
+  &:active {
+    background-color: var(--color-gray-100);
+  }
+
+  &[data-popup-open] {
+    background-color: var(--color-gray-100);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+/* ArrowOuterStroke  */
+.ArrowSvg > path:nth-child(2) {
+  @media (prefers-color-scheme: light) {
+    fill: var(--color-gray-200);
+  }
+}
+
+/* ArrowInnerStroke  */
+.ArrowSvg > path:nth-child(3) {
+  @media (prefers-color-scheme: dark) {
+    fill: var(--color-gray-300);
+  }
+}
+
+.Textarea {
+  box-sizing: border-box;
+  padding: 0.875rem;
+  margin: 0;
+  border: 1px solid var(--color-gray-200);
+  width: 100%;
+  border-radius: 0.375rem;
+  font-family: inherit;
+  font-size: 1rem;
+  font-weight: normal;
+  background-color: transparent;
+  color: var(--color-gray-900);
+
+  &:focus {
+    outline: 2px solid var(--color-blue);
+    outline-offset: -1px;
+  }
+}
+
+.Wrapper {
+  width: 50dvw;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.h3 {
+  margin-bottom: 1rem;
+}
+
+.a {
+  color: var(--color-blue);
+  text-decoration: underline;
+  align-self: flex-start;
+}
diff --git a/docs/src/app/(private)/experiments/toolbar/triggers.module.css b/docs/src/app/(private)/experiments/toolbar/triggers.module.css
new file mode 100644
index 0000000000..2b27ea64a6
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toolbar/triggers.module.css
@@ -0,0 +1,14 @@
+.Root {
+  background-color: var(--color-gray-100);
+  padding: 0 0.75rem;
+}
+
+.Toggle {
+  margin-block: 0.5rem;
+}
+
+.Separator[data-orientation='vertical'] {
+  width: 1px;
+  align-self: stretch;
+  background-color: var(--color-gray-200);
+}
diff --git a/docs/src/app/(private)/experiments/toolbar/triggers.tsx b/docs/src/app/(private)/experiments/toolbar/triggers.tsx
new file mode 100644
index 0000000000..363e9eb575
--- /dev/null
+++ b/docs/src/app/(private)/experiments/toolbar/triggers.tsx
@@ -0,0 +1,102 @@
+'use client';
+import * as React from 'react';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { Toggle } from '@base-ui-components/react/toggle';
+import { Switch } from '@base-ui-components/react/switch';
+import { Dialog } from '@base-ui-components/react/dialog';
+import toolbarClasses from './toolbar.module.css';
+import triggerToolbarClasses from './triggers.module.css';
+import switchClasses from '../../../(public)/(content)/react/components/switch/demos/hero/css-modules/index.module.css';
+import dialogClasses from '../../../(public)/(content)/react/components/alert-dialog/demos/hero/css-modules/index.module.css';
+import popoverClasses from '../../../(public)/(content)/react/components/popover/demos/hero/css-modules/index.module.css';
+import { MessageCircleIcon } from './_icons';
+
+const styles = {
+  demo: triggerToolbarClasses,
+  toolbar: toolbarClasses,
+  switch: switchClasses,
+  dialog: dialogClasses,
+};
+
+const TEXT = `Shows toolbar buttons as various triggers:
+- Menu.Trigger
+- Dialog.Trigger
+- Popover.Trigger
+`;
+
+const DISABLED = false;
+
+function classNames(...c: Array<string | undefined | null | false>) {
+  return c.filter(Boolean).join(' ');
+}
+
+export default function App() {
+  return (
+    <React.Fragment>
+      <a
+        className={styles.toolbar.a}
+        href="https://www.w3.org/WAI/ARIA/apg/patterns/toolbar/"
+        target="_blank"
+        rel="noreferrer"
+      >
+        <h3 className={styles.toolbar.h3}>Toolbar pattern</h3>
+      </a>
+      <div className={styles.toolbar.Wrapper}>
+        <Toolbar.Root className={classNames(styles.toolbar.Root, styles.demo.Root)}>
+          <Dialog.Root>
+            <Toolbar.Button
+              disabled={DISABLED}
+              className={classNames(styles.toolbar.Toggle, styles.demo.Toggle)}
+              render={
+                <Dialog.Trigger>
+                  <MessageCircleIcon className={styles.toolbar.Icon} />
+                </Dialog.Trigger>
+              }
+            />
+
+            <Dialog.Portal keepMounted>
+              <Dialog.Backdrop className={styles.dialog.Backdrop} />
+              <Dialog.Popup className={styles.dialog.Popup}>
+                <Dialog.Title className={styles.dialog.Title}>
+                  Write a comment
+                </Dialog.Title>
+                <textarea name="" id="" className={styles.toolbar.Textarea} />
+                <div className={styles.dialog.Actions}>
+                  <Dialog.Close data-color="red" className={styles.dialog.Button}>
+                    Close
+                  </Dialog.Close>
+                  <Dialog.Close className={styles.dialog.Button}>
+                    Submit
+                  </Dialog.Close>
+                </div>
+              </Dialog.Popup>
+            </Dialog.Portal>
+          </Dialog.Root>
+
+          <Toolbar.Separator className={styles.demo.Separator} />
+
+          <Toolbar.Button
+            disabled={DISABLED}
+            className={classNames(styles.toolbar.Toggle, styles.demo.Toggle)}
+            render={
+              <Switch.Root defaultChecked className={styles.switch.Switch}>
+                <Switch.Thumb
+                  className={styles.switch.Thumb}
+                  style={{ marginRight: 'auto' }}
+                />
+              </Switch.Root>
+            }
+          />
+        </Toolbar.Root>
+
+        <textarea
+          className={styles.toolbar.Textarea}
+          name=""
+          id=""
+          rows={8}
+          defaultValue={TEXT}
+        />
+      </div>
+    </React.Fragment>
+  );
+}
diff --git a/docs/src/app/(public)/(content)/react/components/toolbar/page.mdx b/docs/src/app/(public)/(content)/react/components/toolbar/page.mdx
new file mode 100644
index 0000000000..8ec7af9243
--- /dev/null
+++ b/docs/src/app/(public)/(content)/react/components/toolbar/page.mdx
@@ -0,0 +1,27 @@
+# Toolbar
+
+<Subtitle>A container for grouping a set of buttons and controls.</Subtitle>
+<Meta
+  name="description"
+  content="A high-quality, unstyled React toolbar component that grouping a set of buttons and controls."
+/>
+
+## API reference
+
+Import the component and assemble its parts:
+
+```jsx title="Anatomy"
+import { Toolbar } from '@base-ui-components/react/toolbar';
+
+<Toolbar.Root>
+  <Toolbar.Button />
+  <Toolbar.Link />
+  <Toolbar.Separator />
+  <Toolbar.Group>
+    <Toolbar.Button />
+    <Toolbar.Button />
+  <Toolbar.Group />
+</Toolbar.Root>;
+```
+
+<Reference component="Toolbar" parts="Root, Button, Link, Group, Separator" />
diff --git a/docs/src/components/Experiments/ExperimentsList.tsx b/docs/src/components/Experiments/ExperimentsList.tsx
index 5dd4107338..e913982510 100644
--- a/docs/src/components/Experiments/ExperimentsList.tsx
+++ b/docs/src/components/Experiments/ExperimentsList.tsx
@@ -38,10 +38,12 @@ for (const key of allExperimentFiles) {
     groups[group] = [];
   }
 
-  groups[group].push({
-    name: camelToSentenceCase(name.replace('.tsx', '').replace(/-/g, ' ')),
-    path: key.replace('.tsx', ''),
-  });
+  if (!name.startsWith('_')) {
+    groups[group].push({
+      name: camelToSentenceCase(name.replace('.tsx', '').replace(/-/g, ' ')),
+      path: key.replace('.tsx', ''),
+    });
+  }
 }
 
 export function ExperimentsList(props: React.HTMLAttributes<HTMLDivElement>) {
diff --git a/docs/src/nav.ts b/docs/src/nav.ts
index 32cdcf1ab0..ad5cffaee1 100644
--- a/docs/src/nav.ts
+++ b/docs/src/nav.ts
@@ -140,6 +140,10 @@ export const nav = [
         label: 'Toggle Group',
         href: '/react/components/toggle-group',
       },
+      {
+        label: 'Toolbar',
+        href: '/react/components/toolbar',
+      },
       {
         label: 'Tooltip',
         href: '/react/components/tooltip',
diff --git a/packages/react/src/composite/root/CompositeRoot.tsx b/packages/react/src/composite/root/CompositeRoot.tsx
index d23f8de6f4..5572bcb13e 100644
--- a/packages/react/src/composite/root/CompositeRoot.tsx
+++ b/packages/react/src/composite/root/CompositeRoot.tsx
@@ -29,6 +29,7 @@ function CompositeRoot<Metadata extends {}>(props: CompositeRoot.Props<Metadata>
     onMapChange,
     stopEventPropagation,
     rootRef,
+    disabledIndices,
     ...otherProps
   } = props;
 
@@ -45,6 +46,7 @@ function CompositeRoot<Metadata extends {}>(props: CompositeRoot.Props<Metadata>
       stopEventPropagation,
       enableHomeAndEndKeys,
       direction,
+      disabledIndices,
     });
 
   const { renderElement } = useComponentRenderer({
@@ -85,6 +87,7 @@ namespace CompositeRoot {
     onMapChange?: (newMap: Map<Node, CompositeMetadata<Metadata> | null>) => void;
     stopEventPropagation?: boolean;
     rootRef?: React.RefObject<HTMLElement | null>;
+    disabledIndices?: number[];
   }
 }
 
@@ -116,6 +119,10 @@ CompositeRoot.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   direction: PropTypes.oneOf(['ltr', 'rtl']),
+  /**
+   * @ignore
+   */
+  disabledIndices: PropTypes.arrayOf(PropTypes.number),
   /**
    * @ignore
    */
diff --git a/packages/react/src/composite/root/CompositeRootContext.ts b/packages/react/src/composite/root/CompositeRootContext.ts
index 347ec9d1a7..0fd3fa14fc 100644
--- a/packages/react/src/composite/root/CompositeRootContext.ts
+++ b/packages/react/src/composite/root/CompositeRootContext.ts
@@ -14,9 +14,11 @@ if (process.env.NODE_ENV !== 'production') {
   CompositeRootContext.displayName = 'CompositeRootContext';
 }
 
-export function useCompositeRootContext() {
+export function useCompositeRootContext(optional: true): CompositeRootContext | undefined;
+export function useCompositeRootContext(optional?: false): CompositeRootContext;
+export function useCompositeRootContext(optional = false) {
   const context = React.useContext(CompositeRootContext);
-  if (context === undefined) {
+  if (context === undefined && !optional) {
     throw new Error(
       'Base UI: CompositeRootContext is missing. Composite parts must be placed within <Composite.Root>.',
     );
diff --git a/packages/react/src/composite/root/useCompositeRoot.ts b/packages/react/src/composite/root/useCompositeRoot.ts
index 28583d9457..fe0603ee16 100644
--- a/packages/react/src/composite/root/useCompositeRoot.ts
+++ b/packages/react/src/composite/root/useCompositeRoot.ts
@@ -52,11 +52,9 @@ export interface UseCompositeRootParameters {
    * @default false
    */
   stopEventPropagation?: boolean;
+  disabledIndices?: number[];
 }
 
-// Advanced options of Composite, to be implemented later if needed.
-const disabledIndices = undefined;
-
 /**
  * @ignore - internal hook.
  */
@@ -73,6 +71,7 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
     rootRef: externalRef,
     enableHomeAndEndKeys = false,
     stopEventPropagation = false,
+    disabledIndices,
   } = params;
 
   const [internalHighlightedIndex, internalSetHighlightedIndex] = React.useState(0);
@@ -238,7 +237,6 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
             if (preventedKeys.includes(event.key)) {
               event.preventDefault();
             }
-
             onHighlightedIndexChange(nextIndex);
 
             // Wait for FocusManager `returnFocus` to execute.
@@ -261,6 +259,7 @@ export function useCompositeRoot(params: UseCompositeRootParameters) {
       onHighlightedIndexChange,
       orientation,
       enableHomeAndEndKeys,
+      disabledIndices,
     ],
   );
 
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 18877eb69f..41459c4a4b 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -25,4 +25,5 @@ export * from './switch';
 export * from './tabs';
 export * from './toggle';
 export * from './toggle-group';
+export * from './toolbar';
 export * from './tooltip';
diff --git a/packages/react/src/menu/trigger/MenuTrigger.tsx b/packages/react/src/menu/trigger/MenuTrigger.tsx
index e69461e361..62bbfc45af 100644
--- a/packages/react/src/menu/trigger/MenuTrigger.tsx
+++ b/packages/react/src/menu/trigger/MenuTrigger.tsx
@@ -7,6 +7,10 @@ import { pressableTriggerOpenStateMapping } from '../../utils/popupStateMapping'
 import { useComponentRenderer } from '../../utils/useComponentRenderer';
 import { BaseUIComponentProps } from '../../utils/types';
 
+import { useCompositeButton } from '../../toolbar/root/useCompositeButton';
+import type { ToolbarItemMetadata } from '../../toolbar/root/ToolbarRoot';
+import { CompositeItem } from '../../composite/item/CompositeItem';
+
 /**
  * A button that opens the menu.
  * Renders a `<button>` element.
@@ -17,7 +21,13 @@ const MenuTrigger = React.forwardRef(function MenuTrigger(
   props: MenuTrigger.Props,
   forwardedRef: React.ForwardedRef<HTMLElement>,
 ) {
-  const { render, className, disabled = false, ...other } = props;
+  const {
+    render,
+    className,
+    disabled: disabledParam = false,
+    focusableWhenDisabled = false,
+    ...other
+  } = props;
 
   const {
     getTriggerProps: getRootTriggerProps,
@@ -29,8 +39,17 @@ const MenuTrigger = React.forwardRef(function MenuTrigger(
     positionerRef,
   } = useMenuRootContext();
 
+  const triggerDisabled = disabledParam || menuDisabled;
+
+  const { toolbarContext, disabled, itemMetadata } = useCompositeButton({
+    disabled: triggerDisabled,
+    focusableWhenDisabled,
+  });
+
+  const isCompositeItem = toolbarContext !== undefined;
+
   const { getTriggerProps } = useMenuTrigger({
-    disabled: disabled || menuDisabled,
+    disabled,
     rootRef: forwardedRef,
     setTriggerElement,
     open,
@@ -50,6 +69,10 @@ const MenuTrigger = React.forwardRef(function MenuTrigger(
     extraProps: other,
   });
 
+  if (isCompositeItem) {
+    return <CompositeItem<ToolbarItemMetadata> metadata={itemMetadata} render={renderElement()} />;
+  }
+
   return renderElement();
 });
 
@@ -61,6 +84,10 @@ namespace MenuTrigger {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
   }
 
   export type State = {
@@ -90,6 +117,10 @@ MenuTrigger.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * @default false
+   */
+  focusableWhenDisabled: PropTypes.bool,
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.
diff --git a/packages/react/src/menu/trigger/useMenuTrigger.ts b/packages/react/src/menu/trigger/useMenuTrigger.ts
index b9576884ba..d10f4a5fb6 100644
--- a/packages/react/src/menu/trigger/useMenuTrigger.ts
+++ b/packages/react/src/menu/trigger/useMenuTrigger.ts
@@ -43,7 +43,8 @@ export function useMenuTrigger(parameters: useMenuTrigger.Parameters): useMenuTr
       return getButtonProps(
         mergeReactProps(externalProps, {
           'aria-haspopup': 'menu' as const,
-          tabIndex: 0, // this is needed to make the button focused after click in Safari
+          // TODO: how can CompositeItem's tabIndex bypass mergeReactProps and override this?
+          // tabIndex: !isCompositeItem ? 0 : undefined, // this is needed to make the button focused after click in Safari
           ref: handleRef,
           onMouseDown: (event: React.MouseEvent) => {
             if (open) {
diff --git a/packages/react/src/select/trigger/SelectTrigger.tsx b/packages/react/src/select/trigger/SelectTrigger.tsx
index ff395eb9b8..f0db696633 100644
--- a/packages/react/src/select/trigger/SelectTrigger.tsx
+++ b/packages/react/src/select/trigger/SelectTrigger.tsx
@@ -9,6 +9,10 @@ import { useFieldRootContext } from '../../field/root/FieldRootContext';
 import { pressableTriggerOpenStateMapping } from '../../utils/popupStateMapping';
 import { fieldValidityMapping } from '../../field/utils/constants';
 
+import { useCompositeButton } from '../../toolbar/root/useCompositeButton';
+import type { ToolbarItemMetadata } from '../../toolbar/root/ToolbarRoot';
+import { CompositeItem } from '../../composite/item/CompositeItem';
+
 /**
  * A button that opens the select menu.
  * Renders a `<div>` element.
@@ -19,13 +23,22 @@ const SelectTrigger = React.forwardRef(function SelectTrigger(
   props: SelectTrigger.Props,
   forwardedRef: React.ForwardedRef<HTMLElement>,
 ) {
-  const { render, className, disabled: disabledProp = false, ...otherProps } = props;
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    focusableWhenDisabled = false,
+    ...otherProps
+  } = props;
 
   const { state: fieldState, disabled: fieldDisabled } = useFieldRootContext();
 
   const { getRootTriggerProps, disabled: selectDisabled, open } = useSelectRootContext();
 
-  const disabled = fieldDisabled || selectDisabled || disabledProp;
+  const { toolbarContext, disabled, itemMetadata } = useCompositeButton({
+    disabled: fieldDisabled || selectDisabled || disabledProp,
+    focusableWhenDisabled,
+  });
 
   const { getTriggerProps } = useSelectTrigger({
     disabled,
@@ -58,6 +71,10 @@ const SelectTrigger = React.forwardRef(function SelectTrigger(
     extraProps: otherProps,
   });
 
+  if (toolbarContext !== undefined) {
+    return <CompositeItem<ToolbarItemMetadata> metadata={itemMetadata} render={renderElement()} />;
+  }
+
   return renderElement();
 });
 
@@ -69,6 +86,10 @@ namespace SelectTrigger {
      * @default false
      */
     disabled?: boolean;
+    /**
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
   }
 
   export interface State {
@@ -98,6 +119,10 @@ SelectTrigger.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * @default false
+   */
+  focusableWhenDisabled: PropTypes.bool,
   /**
    * Allows you to replace the component’s HTML element
    * with a different tag, or compose it with another component.
diff --git a/packages/react/src/select/trigger/useSelectTrigger.ts b/packages/react/src/select/trigger/useSelectTrigger.ts
index a40cba62fe..c92f842424 100644
--- a/packages/react/src/select/trigger/useSelectTrigger.ts
+++ b/packages/react/src/select/trigger/useSelectTrigger.ts
@@ -77,7 +77,8 @@ export function useSelectTrigger(
         mergeReactProps<'button'>(fieldControlValidation.getValidationProps(externalProps), {
           'aria-labelledby': labelId,
           'aria-readonly': readOnly || undefined,
-          tabIndex: disabled ? -1 : 0, // this is needed to make the button focused after click in Safari
+          // TODO: how can CompositeItem's tabIndex bypass mergeReactProps and override this?
+          // tabIndex: disabled ? -1 : 0, // this is needed to make the button focused after click in Safari
           ref: handleRef,
           onFocus() {
             setFocused(true);
diff --git a/packages/react/src/separator/Separator.tsx b/packages/react/src/separator/Separator.tsx
index bfc9e39c20..f3192938f1 100644
--- a/packages/react/src/separator/Separator.tsx
+++ b/packages/react/src/separator/Separator.tsx
@@ -1,7 +1,7 @@
 'use client';
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import type { BaseUIComponentProps } from '../utils/types';
+import type { BaseUIComponentProps, Orientation } from '../utils/types';
 import { mergeReactProps } from '../utils/mergeReactProps';
 import { useComponentRenderer } from '../utils/useComponentRenderer';
 
@@ -39,8 +39,6 @@ const Separator = React.forwardRef(function SeparatorComponent(
   return renderElement();
 });
 
-type Orientation = 'horizontal' | 'vertical';
-
 namespace Separator {
   export interface Props extends BaseUIComponentProps<'div', State> {
     /**
diff --git a/packages/react/src/toggle-group/ToggleGroup.tsx b/packages/react/src/toggle-group/ToggleGroup.tsx
index bf5f377e1e..941e731651 100644
--- a/packages/react/src/toggle-group/ToggleGroup.tsx
+++ b/packages/react/src/toggle-group/ToggleGroup.tsx
@@ -6,6 +6,7 @@ import { useComponentRenderer } from '../utils/useComponentRenderer';
 import type { BaseUIComponentProps } from '../utils/types';
 import { CompositeRoot } from '../composite/root/CompositeRoot';
 import { useDirection } from '../direction-provider/DirectionContext';
+import { useToolbarRootContext } from '../toolbar/root/ToolbarRootContext';
 import { useToggleGroup, type UseToggleGroup } from './useToggleGroup';
 import { ToggleGroupContext } from './ToggleGroupContext';
 
@@ -29,7 +30,7 @@ const ToggleGroup = React.forwardRef(function ToggleGroup(
 ) {
   const {
     defaultValue: defaultValueProp,
-    disabled = false,
+    disabled: disabledParam = false,
     loop = true,
     onValueChange: onValueChangeProp,
     orientation = 'horizontal',
@@ -42,6 +43,8 @@ const ToggleGroup = React.forwardRef(function ToggleGroup(
 
   const direction = useDirection();
 
+  const toolbarContext = useToolbarRootContext(true);
+
   const defaultValue = React.useMemo(() => {
     if (valueProp === undefined) {
       return defaultValueProp ?? [];
@@ -50,32 +53,27 @@ const ToggleGroup = React.forwardRef(function ToggleGroup(
     return undefined;
   }, [valueProp, defaultValueProp]);
 
-  const {
-    getRootProps,
-    disabled: isDisabled,
-    setGroupValue,
-    value,
-  } = useToggleGroup({
+  const { getRootProps, disabled, setGroupValue, value } = useToggleGroup({
     value: valueProp,
     defaultValue,
-    disabled,
+    disabled: toolbarContext?.disabled || disabledParam,
     toggleMultiple,
     onValueChange: onValueChangeProp ?? NOOP,
   });
 
   const state: ToggleGroup.State = React.useMemo(
-    () => ({ disabled: isDisabled, multiple: toggleMultiple, orientation }),
-    [isDisabled, orientation, toggleMultiple],
+    () => ({ disabled, multiple: toggleMultiple, orientation }),
+    [disabled, orientation, toggleMultiple],
   );
 
   const contextValue: ToggleGroupContext = React.useMemo(
     () => ({
-      disabled: isDisabled,
+      disabled,
       orientation,
       setGroupValue,
       value,
     }),
-    [isDisabled, orientation, setGroupValue, value],
+    [disabled, orientation, setGroupValue, value],
   );
 
   const { renderElement } = useComponentRenderer({
@@ -90,7 +88,11 @@ const ToggleGroup = React.forwardRef(function ToggleGroup(
 
   return (
     <ToggleGroupContext.Provider value={contextValue}>
-      <CompositeRoot direction={direction} loop={loop} render={renderElement()} />
+      {toolbarContext ? (
+        renderElement()
+      ) : (
+        <CompositeRoot direction={direction} loop={loop} render={renderElement()} />
+      )}
     </ToggleGroupContext.Provider>
   );
 });
diff --git a/packages/react/src/toggle/Toggle.tsx b/packages/react/src/toggle/Toggle.tsx
index 6fb15f6948..b97cc2d339 100644
--- a/packages/react/src/toggle/Toggle.tsx
+++ b/packages/react/src/toggle/Toggle.tsx
@@ -8,6 +8,9 @@ import { CompositeItem } from '../composite/item/CompositeItem';
 import { useToggleGroupContext } from '../toggle-group/ToggleGroupContext';
 import { useToggle } from './useToggle';
 
+import { useCompositeButton } from '../toolbar/root/useCompositeButton';
+import type { ToolbarItemMetadata } from '../toolbar/root/ToolbarRoot';
+
 /**
  * A two-state button that can be on or off.
  * Renders a `<button>` element.
@@ -28,6 +31,7 @@ const Toggle = React.forwardRef(function Toggle(
     render,
     type, // cannot change button type
     value: valueProp,
+    focusableWhenDisabled = false,
     ...otherProps
   } = props;
 
@@ -35,10 +39,19 @@ const Toggle = React.forwardRef(function Toggle(
 
   const groupValue = groupContext?.value ?? [];
 
-  const { disabled, pressed, getRootProps } = useToggle({
+  const { toolbarContext, disabled, itemMetadata } = useCompositeButton({
+    disabled: (disabledProp || groupContext?.disabled) ?? false,
+    focusableWhenDisabled,
+  });
+
+  const {
+    disabled: toggleDisabled,
+    pressed,
+    getRootProps,
+  } = useToggle({
     buttonRef: forwardedRef,
     defaultPressed: groupContext ? undefined : defaultPressed,
-    disabled: (disabledProp || groupContext?.disabled) ?? false,
+    disabled,
     onPressedChange: onPressedChangeProp ?? NOOP,
     pressed: groupContext && valueProp ? groupValue?.indexOf(valueProp) > -1 : pressedProp,
     setGroupValue: groupContext?.setGroupValue ?? NOOP,
@@ -47,10 +60,10 @@ const Toggle = React.forwardRef(function Toggle(
 
   const state: Toggle.State = React.useMemo(
     () => ({
-      disabled,
+      disabled: toggleDisabled,
       pressed,
     }),
-    [disabled, pressed],
+    [toggleDisabled, pressed],
   );
 
   const { renderElement } = useComponentRenderer({
@@ -62,6 +75,10 @@ const Toggle = React.forwardRef(function Toggle(
     extraProps: otherProps,
   });
 
+  if (toolbarContext !== undefined) {
+    return <CompositeItem<ToolbarItemMetadata> metadata={itemMetadata} render={renderElement()} />;
+  }
+
   return groupContext ? <CompositeItem render={renderElement()} /> : renderElement();
 });
 
@@ -92,6 +109,11 @@ export namespace Toggle {
      * An id or space-separated list of ids of elements that label the Toggle.
      */
     'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+
+    /**
+     * @default false
+     */
+    focusableWhenDisabled?: boolean;
   }
 }
 
@@ -127,6 +149,10 @@ Toggle.propTypes /* remove-proptypes */ = {
    * @default false
    */
   disabled: PropTypes.bool,
+  /**
+   * @default false
+   */
+  focusableWhenDisabled: PropTypes.bool,
   /**
    * @ignore
    */
diff --git a/packages/react/src/toolbar/button/ToolbarButton.test.tsx b/packages/react/src/toolbar/button/ToolbarButton.test.tsx
new file mode 100644
index 0000000000..09f757062f
--- /dev/null
+++ b/packages/react/src/toolbar/button/ToolbarButton.test.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { expect } from 'chai';
+// import { spy } from 'sinon';
+// import { act } from '@mui/internal-test-utils';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { screen } from '@mui/internal-test-utils';
+import { createRenderer, describeConformance } from '#test-utils';
+import { NOOP } from '../../utils/noop';
+import { ToolbarRootContext } from '../root/ToolbarRootContext';
+import { CompositeRootContext } from '../../composite/root/CompositeRootContext';
+
+const testCompositeContext = {
+  highlightedIndex: 0,
+  onHighlightedIndexChange: NOOP,
+};
+
+const testToolbarContext: ToolbarRootContext = {
+  disabled: false,
+  orientation: 'horizontal',
+  setItemMap: NOOP,
+};
+
+describe('<Toolbar.Button />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toolbar.Button />, () => ({
+    refInstanceof: window.HTMLButtonElement,
+    render: (node) => {
+      return render(
+        <ToolbarRootContext.Provider value={testToolbarContext}>
+          <CompositeRootContext.Provider value={testCompositeContext}>
+            {node}
+          </CompositeRootContext.Provider>
+        </ToolbarRootContext.Provider>,
+      );
+    },
+  }));
+
+  describe('ARIA attributes', () => {
+    it('renders a button', async () => {
+      const { getByTestId } = await render(
+        <Toolbar.Root>
+          <Toolbar.Button data-testid="button" />
+        </Toolbar.Root>,
+      );
+
+      expect(getByTestId('button')).to.equal(screen.getByRole('button'));
+    });
+  });
+});
diff --git a/packages/react/src/toolbar/button/ToolbarButton.tsx b/packages/react/src/toolbar/button/ToolbarButton.tsx
new file mode 100644
index 0000000000..b21dc34958
--- /dev/null
+++ b/packages/react/src/toolbar/button/ToolbarButton.tsx
@@ -0,0 +1,118 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { BaseUIComponentProps } from '../../utils/types';
+import { useButton } from '../../use-button';
+import { CompositeItem } from '../../composite/item/CompositeItem';
+import type { ToolbarRoot, ToolbarItemMetadata } from '../root/ToolbarRoot';
+import { useToolbarRootContext } from '../root/ToolbarRootContext';
+import { useToolbarGroupContext } from '../group/ToolbarGroupContext';
+
+/**
+ * A button that can be used as-is or as a trigger for other components.
+ * Renders a `<button>` element.
+ *
+ * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
+ */
+const ToolbarButton = React.forwardRef(function ToolbarButton(
+  props: ToolbarButton.Props,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    className,
+    disabled: disabledProp = false,
+    focusableWhenDisabled = true,
+    render,
+    ...otherProps
+  } = props;
+
+  const { disabled: toolbarDisabled, orientation } = useToolbarRootContext();
+
+  const groupContext = useToolbarGroupContext(true);
+
+  const itemMetadata = React.useMemo(() => ({ focusableWhenDisabled }), [focusableWhenDisabled]);
+
+  const disabled = toolbarDisabled || groupContext?.disabled || disabledProp;
+
+  const { getButtonProps } = useButton({
+    buttonRef: forwardedRef,
+    disabled,
+    focusableWhenDisabled,
+    type: 'button',
+  });
+
+  const state: ToolbarButton.State = React.useMemo(
+    () => ({
+      disabled,
+      orientation,
+      focusable: focusableWhenDisabled,
+    }),
+    [disabled, focusableWhenDisabled, orientation],
+  );
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getButtonProps,
+    render: render ?? 'button',
+    state,
+    className,
+    extraProps: otherProps,
+  });
+
+  return <CompositeItem<ToolbarItemMetadata> metadata={itemMetadata} render={renderElement()} />;
+});
+
+export namespace ToolbarButton {
+  export interface State extends ToolbarRoot.State {
+    disabled: boolean;
+    focusable: boolean;
+  }
+
+  export interface Props extends BaseUIComponentProps<'button', ToolbarRoot.State> {
+    /**
+     * When `true` the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When `true` the item remains focuseable when disabled.
+     * @default true
+     */
+    focusableWhenDisabled?: boolean;
+  }
+}
+
+export { ToolbarButton };
+
+ToolbarButton.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * When `true` the item is disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * When `true` the item remains focuseable when disabled.
+   * @default true
+   */
+  focusableWhenDisabled: PropTypes.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
diff --git a/packages/react/src/toolbar/group/ToolbarGroup.tsx b/packages/react/src/toolbar/group/ToolbarGroup.tsx
new file mode 100644
index 0000000000..c022c77924
--- /dev/null
+++ b/packages/react/src/toolbar/group/ToolbarGroup.tsx
@@ -0,0 +1,95 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { BaseUIComponentProps } from '../../utils/types';
+import { useToolbarRootContext } from '../root/ToolbarRootContext';
+import type { ToolbarRoot } from '../root/ToolbarRoot';
+import { ToolbarGroupContext } from './ToolbarGroupContext';
+
+/**
+ * Groups several toolbar items or toggles.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
+ */
+const ToolbarGroup = React.forwardRef(function ToolbarGroup(
+  props: ToolbarGroup.Props,
+  forwardedRef: React.ForwardedRef<HTMLElement>,
+) {
+  const { className, disabled = false, render, ...otherProps } = props;
+
+  const { orientation } = useToolbarRootContext();
+
+  const contextValue: ToolbarGroupContext = React.useMemo(
+    () => ({
+      disabled,
+    }),
+    [disabled],
+  );
+
+  const state: ToolbarRoot.State = React.useMemo(
+    () => ({
+      disabled,
+      orientation,
+    }),
+    [disabled, orientation],
+  );
+
+  const { renderElement } = useComponentRenderer({
+    render: render ?? 'div',
+    ref: forwardedRef,
+    state,
+    className,
+    extraProps: {
+      ...otherProps,
+      role: 'group',
+    },
+  });
+
+  return (
+    <ToolbarGroupContext.Provider value={contextValue}>
+      {renderElement()}
+    </ToolbarGroupContext.Provider>
+  );
+});
+
+export namespace ToolbarGroup {
+  export interface Props extends BaseUIComponentProps<'div', ToolbarRoot.State> {
+    /**
+     * When `true` all toolbar items in the group are disabled.
+     * @default false
+     */
+    disabled?: boolean;
+  }
+}
+
+export { ToolbarGroup };
+
+ToolbarGroup.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * When `true` all toolbar items in the group are disabled.
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
diff --git a/packages/react/src/toolbar/group/ToolbarGroupContext.ts b/packages/react/src/toolbar/group/ToolbarGroupContext.ts
new file mode 100644
index 0000000000..eabfc18040
--- /dev/null
+++ b/packages/react/src/toolbar/group/ToolbarGroupContext.ts
@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export interface ToolbarGroupContext {
+  disabled: boolean;
+}
+
+export const ToolbarGroupContext = React.createContext<ToolbarGroupContext | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  ToolbarGroupContext.displayName = 'ToolbarGroupContext';
+}
+
+function useToolbarGroupContext(optional?: false): ToolbarGroupContext;
+function useToolbarGroupContext(optional: true): ToolbarGroupContext | undefined;
+function useToolbarGroupContext(optional?: boolean) {
+  const context = React.useContext(ToolbarGroupContext);
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI: ToolbarGroupContext is missing. ToolbarGroup parts must be placed within <Toolbar.Group>.',
+    );
+  }
+  return context;
+}
+
+export { useToolbarGroupContext };
diff --git a/packages/react/src/toolbar/index.parts.ts b/packages/react/src/toolbar/index.parts.ts
new file mode 100644
index 0000000000..f8ce57ae4c
--- /dev/null
+++ b/packages/react/src/toolbar/index.parts.ts
@@ -0,0 +1,5 @@
+export { ToolbarSeparator as Separator } from './separator/ToolbarSeparator';
+export { ToolbarRoot as Root } from './root/ToolbarRoot';
+export { ToolbarGroup as Group } from './group/ToolbarGroup';
+export { ToolbarButton as Button } from './button/ToolbarButton';
+export { ToolbarLink as Link } from './link/ToolbarLink';
diff --git a/packages/react/src/toolbar/index.ts b/packages/react/src/toolbar/index.ts
new file mode 100644
index 0000000000..01dbf1bcc5
--- /dev/null
+++ b/packages/react/src/toolbar/index.ts
@@ -0,0 +1 @@
+export * as Toolbar from './index.parts';
diff --git a/packages/react/src/toolbar/link/ToolbarLink.test.tsx b/packages/react/src/toolbar/link/ToolbarLink.test.tsx
new file mode 100644
index 0000000000..da291c934a
--- /dev/null
+++ b/packages/react/src/toolbar/link/ToolbarLink.test.tsx
@@ -0,0 +1,50 @@
+import * as React from 'react';
+import { expect } from 'chai';
+// import { spy } from 'sinon';
+// import { act } from '@mui/internal-test-utils';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { screen } from '@mui/internal-test-utils';
+import { createRenderer, describeConformance } from '#test-utils';
+import { NOOP } from '../../utils/noop';
+import { ToolbarRootContext } from '../root/ToolbarRootContext';
+import { CompositeRootContext } from '../../composite/root/CompositeRootContext';
+
+const testCompositeContext = {
+  highlightedIndex: 0,
+  onHighlightedIndexChange: NOOP,
+};
+
+const testToolbarContext: ToolbarRootContext = {
+  disabled: false,
+  orientation: 'horizontal',
+  setItemMap: NOOP,
+};
+
+describe('<Toolbar.Link />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toolbar.Link />, () => ({
+    refInstanceof: window.HTMLAnchorElement,
+    render: (node) => {
+      return render(
+        <ToolbarRootContext.Provider value={testToolbarContext}>
+          <CompositeRootContext.Provider value={testCompositeContext}>
+            {node}
+          </CompositeRootContext.Provider>
+        </ToolbarRootContext.Provider>,
+      );
+    },
+  }));
+
+  describe('ARIA attributes', () => {
+    it('renders an anchor', async () => {
+      const { getByTestId } = await render(
+        <Toolbar.Root>
+          <Toolbar.Link data-testid="link" href="https://base-ui.com" />
+        </Toolbar.Root>,
+      );
+
+      expect(getByTestId('link')).to.equal(screen.getByRole('link'));
+    });
+  });
+});
diff --git a/packages/react/src/toolbar/link/ToolbarLink.tsx b/packages/react/src/toolbar/link/ToolbarLink.tsx
new file mode 100644
index 0000000000..d440940d82
--- /dev/null
+++ b/packages/react/src/toolbar/link/ToolbarLink.tsx
@@ -0,0 +1,84 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { BaseUIComponentProps, Orientation } from '../../utils/types';
+import { useButton } from '../../use-button';
+import { CompositeItem } from '../../composite/item/CompositeItem';
+import type { ToolbarItemMetadata } from '../root/ToolbarRoot';
+import { useToolbarRootContext } from '../root/ToolbarRootContext';
+
+const TOOLBAR_LINK_METADATA = {
+  focusableWhenDisabled: true,
+};
+/**
+ * A link component.
+ * Renders a `<a>` element.
+ *
+ * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
+ */
+const ToolbarLink = React.forwardRef(function ToolbarLink(
+  props: ToolbarLink.Props,
+  forwardedRef: React.ForwardedRef<HTMLAnchorElement>,
+) {
+  const { className, render, ...otherProps } = props;
+
+  const { orientation } = useToolbarRootContext();
+
+  const { getButtonProps } = useButton({
+    buttonRef: forwardedRef,
+    elementName: 'a',
+  });
+
+  const state: ToolbarLink.State = React.useMemo(
+    () => ({
+      orientation,
+    }),
+    [orientation],
+  );
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getButtonProps,
+    render: render ?? 'a',
+    state,
+    className,
+    extraProps: otherProps,
+  });
+
+  return (
+    <CompositeItem<ToolbarItemMetadata> metadata={TOOLBAR_LINK_METADATA} render={renderElement()} />
+  );
+});
+
+export namespace ToolbarLink {
+  export interface State {
+    orientation: Orientation;
+  }
+
+  export interface Props extends BaseUIComponentProps<'a', State> {}
+}
+
+export { ToolbarLink };
+
+ToolbarLink.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
diff --git a/packages/react/src/toolbar/root/ToolbarRoot.test.tsx b/packages/react/src/toolbar/root/ToolbarRoot.test.tsx
new file mode 100644
index 0000000000..4eb292d1f5
--- /dev/null
+++ b/packages/react/src/toolbar/root/ToolbarRoot.test.tsx
@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { expect } from 'chai';
+// import { spy } from 'sinon';
+// import { act } from '@mui/internal-test-utils';
+import { Toolbar } from '@base-ui-components/react/toolbar';
+import { createRenderer, describeConformance } from '#test-utils';
+
+describe('<Toolbar.Root />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<Toolbar.Root />, () => ({
+    refInstanceof: window.HTMLDivElement,
+    render,
+  }));
+
+  describe('ARIA attributes', () => {
+    it('has role="toolbar"', async () => {
+      const { container } = await render(<Toolbar.Root />);
+
+      expect(container.firstElementChild as HTMLElement).to.have.attribute('role', 'toolbar');
+    });
+  });
+});
diff --git a/packages/react/src/toolbar/root/ToolbarRoot.tsx b/packages/react/src/toolbar/root/ToolbarRoot.tsx
new file mode 100644
index 0000000000..0778dd7689
--- /dev/null
+++ b/packages/react/src/toolbar/root/ToolbarRoot.tsx
@@ -0,0 +1,144 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { BaseUIComponentProps, Orientation } from '../../utils/types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import { CompositeRoot } from '../../composite/root/CompositeRoot';
+import { ToolbarRootContext } from './ToolbarRootContext';
+import { useToolbarRoot } from './useToolbarRoot';
+
+/**
+ * A container for grouping a set of controls, such as buttons, toggle groups, or menus.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
+ */
+const ToolbarRoot = React.forwardRef(function ToolbarRoot(
+  props: ToolbarRoot.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    cols = 1,
+    disabled = false,
+    loop = true,
+    orientation = 'horizontal',
+    className,
+    render,
+    ...otherProps
+  } = props;
+
+  const { getRootProps, disabledIndices, setItemMap } = useToolbarRoot({
+    disabled,
+    orientation,
+  });
+
+  const toolbarRootContext: ToolbarRootContext = React.useMemo(
+    () => ({
+      disabled,
+      orientation,
+      setItemMap,
+    }),
+    [disabled, orientation, setItemMap],
+  );
+
+  const state = React.useMemo(() => ({ disabled, orientation }), [disabled, orientation]);
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getRootProps,
+    render: render ?? 'div',
+    className,
+    state,
+    extraProps: otherProps,
+    ref: forwardedRef,
+  });
+
+  return (
+    <ToolbarRootContext.Provider value={toolbarRootContext}>
+      <CompositeRoot
+        cols={cols}
+        disabledIndices={disabledIndices}
+        loop={loop}
+        onMapChange={setItemMap}
+        render={renderElement()}
+      />
+    </ToolbarRootContext.Provider>
+  );
+});
+
+export interface ToolbarItemMetadata {
+  focusableWhenDisabled: boolean;
+}
+
+namespace ToolbarRoot {
+  export type State = {
+    disabled: boolean;
+    orientation: Orientation;
+  };
+
+  export interface Props extends BaseUIComponentProps<'div', State> {
+    /**
+     * The number of columns. When greater than 1, the toolbar is arranged into
+     * a grid.
+     * @default 1
+     */
+    cols?: number;
+    disabled?: boolean;
+    /**
+     * The orientation of the toolbar.
+     * @default 'horizontal'
+     */
+    orientation?: Orientation;
+    /**
+     * If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
+     *
+     * @default true
+     */
+    loop?: boolean;
+  }
+}
+
+export { ToolbarRoot };
+
+ToolbarRoot.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The number of columns. When greater than 1, the toolbar is arranged into
+   * a grid.
+   * @default 1
+   */
+  cols: PropTypes.number,
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+  /**
+   * If `true`, using keyboard navigation will wrap focus to the other end of the toolbar once the end is reached.
+   *
+   * @default true
+   */
+  loop: PropTypes.bool,
+  /**
+   * The orientation of the toolbar.
+   * @default 'horizontal'
+   */
+  orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
diff --git a/packages/react/src/toolbar/root/ToolbarRootContext.tsx b/packages/react/src/toolbar/root/ToolbarRootContext.tsx
new file mode 100644
index 0000000000..228093e19e
--- /dev/null
+++ b/packages/react/src/toolbar/root/ToolbarRootContext.tsx
@@ -0,0 +1,37 @@
+'use client';
+import * as React from 'react';
+import type { Orientation } from '../../utils/types';
+import type { CompositeMetadata } from '../../composite/list/CompositeList';
+import type { ToolbarItemMetadata } from './ToolbarRoot';
+
+export interface ToolbarRootContext {
+  disabled: boolean;
+  orientation: Orientation;
+  setItemMap: React.Dispatch<
+    React.SetStateAction<Map<Node, CompositeMetadata<ToolbarItemMetadata> | null>>
+  >;
+}
+
+/**
+ * @ignore - internal component.
+ */
+export const ToolbarRootContext = React.createContext<ToolbarRootContext | undefined>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  ToolbarRootContext.displayName = 'ToolbarRootContext';
+}
+
+function useToolbarRootContext(optional?: false): ToolbarRootContext;
+function useToolbarRootContext(optional: true): ToolbarRootContext | undefined;
+function useToolbarRootContext(optional?: boolean) {
+  const context = React.useContext(ToolbarRootContext);
+  if (context === undefined && !optional) {
+    throw new Error(
+      'Base UI: ToolbarRootContext is missing. Toolbar parts must be placed within <Toolbar.Root>.',
+    );
+  }
+
+  return context;
+}
+
+export { useToolbarRootContext };
diff --git a/packages/react/src/toolbar/root/useCompositeButton.ts b/packages/react/src/toolbar/root/useCompositeButton.ts
new file mode 100644
index 0000000000..78e6765f96
--- /dev/null
+++ b/packages/react/src/toolbar/root/useCompositeButton.ts
@@ -0,0 +1,48 @@
+'use client';
+import * as React from 'react';
+// import { GenericHTMLProps } from '../../utils/types';
+// import { mergeReactProps } from '../utils/mergeReactProps';
+import { useToolbarRootContext, type ToolbarRootContext } from './ToolbarRootContext';
+import type { ToolbarItemMetadata } from './ToolbarRoot';
+
+function useCompositeButton(parameters: useCompositeButton.Parameters) {
+  const { disabled: disabledParam, focusableWhenDisabled } = parameters;
+
+  const toolbarContext = useToolbarRootContext(true);
+
+  const itemMetadata = React.useMemo(
+    () => ({ focusableWhenDisabled: focusableWhenDisabled || toolbarContext !== undefined }),
+    [focusableWhenDisabled, toolbarContext],
+  );
+
+  const disabled = (toolbarContext?.disabled ?? false) || (disabledParam ?? false);
+
+  return {
+    toolbarContext,
+    disabled,
+    itemMetadata,
+  };
+}
+
+namespace useCompositeButton {
+  export interface Parameters {
+    /**
+     * When `true` the item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * When `true` the item remains focuseable when disabled.
+     * @default true
+     */
+    focusableWhenDisabled?: boolean;
+  }
+
+  export interface ReturnValue {
+    toolbarContext: ToolbarRootContext | undefined;
+    disabled: boolean;
+    itemMetadata: ToolbarItemMetadata;
+  }
+}
+
+export { useCompositeButton };
diff --git a/packages/react/src/toolbar/root/useToolbarRoot.ts b/packages/react/src/toolbar/root/useToolbarRoot.ts
new file mode 100644
index 0000000000..7f73047901
--- /dev/null
+++ b/packages/react/src/toolbar/root/useToolbarRoot.ts
@@ -0,0 +1,68 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { GenericHTMLProps } from '../../utils/types';
+import type { CompositeMetadata } from '../../composite/list/CompositeList';
+import type { ToolbarItemMetadata } from './ToolbarRoot';
+
+function useToolbarRoot(parameters: useToolbarRoot.Parameters): useToolbarRoot.ReturnValue {
+  const { orientation } = parameters;
+
+  const [itemMap, setItemMap] = React.useState(
+    () => new Map<Node, CompositeMetadata<ToolbarItemMetadata> | null>(),
+  );
+
+  const disabledIndices = React.useMemo(() => {
+    const output: number[] = [];
+    for (const itemMetadata of itemMap.values()) {
+      if (itemMetadata?.index && !itemMetadata.focusableWhenDisabled) {
+        output.push(itemMetadata.index);
+      }
+    }
+    return output;
+  }, [itemMap]);
+
+  const getRootProps = React.useCallback(
+    (externalProps = {}): React.ComponentPropsWithRef<'div'> => {
+      return mergeReactProps(externalProps, {
+        'aria-orientation': orientation,
+        role: 'toolbar',
+      });
+    },
+    [orientation],
+  );
+
+  return React.useMemo(
+    () => ({
+      getRootProps,
+      disabledIndices,
+      setItemMap,
+    }),
+    [getRootProps, disabledIndices, setItemMap],
+  );
+}
+
+namespace useToolbarRoot {
+  export interface Parameters {
+    disabled: boolean;
+    /**
+     * The component orientation (layout flow direction).
+     */
+    orientation: 'horizontal' | 'vertical';
+  }
+
+  export interface ReturnValue {
+    /**
+     * Resolver for the Toolbar component's props.
+     * @param externalProps additional props for Toolbar.Root
+     * @returns props that should be spread on Toolbar.Root
+     */
+    getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
+    disabledIndices: number[];
+    setItemMap: React.Dispatch<
+      React.SetStateAction<Map<Node, CompositeMetadata<ToolbarItemMetadata> | null>>
+    >;
+  }
+}
+
+export { useToolbarRoot };
diff --git a/packages/react/src/toolbar/separator/ToolbarSeparator.tsx b/packages/react/src/toolbar/separator/ToolbarSeparator.tsx
new file mode 100644
index 0000000000..75fbb32c41
--- /dev/null
+++ b/packages/react/src/toolbar/separator/ToolbarSeparator.tsx
@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import type { BaseUIComponentProps, Orientation } from '../../utils/types';
+import { Separator } from '../../separator';
+import { useToolbarRootContext } from '../root/ToolbarRootContext';
+/**
+ * A separator element accessible to screen readers.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Toolbar](https://base-ui.com/react/components/toolbar)
+ */
+const ToolbarSeparator = React.forwardRef(function ToolbarSeparator(
+  props: ToolbarSeparator.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const context = useToolbarRootContext();
+
+  const orientation = (
+    {
+      vertical: 'horizontal',
+      horizontal: 'vertical',
+    } as Record<Orientation, Orientation>
+  )[context.orientation];
+
+  return <Separator orientation={orientation} {...props} ref={forwardedRef} />;
+});
+
+ToolbarSeparator.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * CSS class applied to the element, or a function that
+   * returns a class based on the component’s state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * Allows you to replace the component’s HTML element
+   * with a different tag, or compose it with another component.
+   *
+   * Accepts a `ReactElement` or a function that returns the element to render.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+} as any;
+
+namespace ToolbarSeparator {
+  export interface Props extends BaseUIComponentProps<'div', Separator.State>, Separator.Props {}
+}
+
+export { ToolbarSeparator };
diff --git a/packages/react/src/use-button/useButton.ts b/packages/react/src/use-button/useButton.ts
index c2fa8bd820..7f8eafe5c5 100644
--- a/packages/react/src/use-button/useButton.ts
+++ b/packages/react/src/use-button/useButton.ts
@@ -6,6 +6,7 @@ import { mergeReactProps } from '../utils/mergeReactProps';
 import { useEventCallback } from '../utils/useEventCallback';
 import { useRootElementName } from '../utils/useRootElementName';
 import { GenericHTMLProps } from '../utils/types';
+import { useCompositeRootContext } from '../composite/root/CompositeRootContext';
 
 export function useButton(parameters: useButton.Parameters = {}): useButton.ReturnValue {
   const {
@@ -22,6 +23,8 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
     rootElementName: elementNameProp,
   });
 
+  const isCompositeItem = useCompositeRootContext(true) !== undefined;
+
   const isNativeButton = useEventCallback(() => {
     const element = buttonRef.current;
 
@@ -43,27 +46,35 @@ export function useButton(parameters: useButton.Parameters = {}): useButton.Retu
   const buttonProps = React.useMemo(() => {
     const additionalProps: AdditionalButtonProps = {};
 
-    if (tabIndex !== undefined) {
+    if (tabIndex !== undefined && !isCompositeItem) {
       additionalProps.tabIndex = tabIndex;
     }
 
     if (elementName === 'BUTTON' || elementName === 'INPUT') {
       if (focusableWhenDisabled) {
         additionalProps['aria-disabled'] = disabled;
-      } else {
+      } else if (!isCompositeItem) {
         additionalProps.disabled = disabled;
       }
     } else if (elementName !== '') {
-      additionalProps.role = 'button';
-      additionalProps.tabIndex = tabIndex ?? 0;
+      if (elementName !== 'A') {
+        additionalProps.role = 'button';
+        if (!isCompositeItem) {
+          additionalProps.tabIndex = tabIndex ?? 0;
+        }
+      } else if (tabIndex && !isCompositeItem) {
+        additionalProps.tabIndex = tabIndex;
+      }
       if (disabled) {
         additionalProps['aria-disabled'] = disabled as boolean;
-        additionalProps.tabIndex = focusableWhenDisabled ? (tabIndex ?? 0) : -1;
+        if (!isCompositeItem) {
+          additionalProps.tabIndex = focusableWhenDisabled ? (tabIndex ?? 0) : -1;
+        }
       }
     }
 
     return additionalProps;
-  }, [disabled, elementName, focusableWhenDisabled, tabIndex]);
+  }, [disabled, elementName, focusableWhenDisabled, isCompositeItem, tabIndex]);
 
   const getButtonProps = React.useCallback(
     (externalProps: GenericButtonProps = {}): GenericButtonProps => {
@@ -129,7 +140,7 @@ interface AdditionalButtonProps
     'aria-disabled': React.AriaAttributes['aria-disabled'];
     disabled: boolean;
     role: React.AriaRole;
-    tabIndex: number;
+    tabIndex?: number;
   }> {}
 
 export namespace useButton {
diff --git a/packages/react/src/utils/types.ts b/packages/react/src/utils/types.ts
index c51f81d698..352c62a330 100644
--- a/packages/react/src/utils/types.ts
+++ b/packages/react/src/utils/types.ts
@@ -64,3 +64,5 @@ export type BaseUIComponentProps<
 export type Simplify<T> = T extends Function ? T : { [K in keyof T]: T[K] };
 
 export type RequiredExcept<T, K extends keyof T> = Required<Omit<T, K>> & Pick<T, K>;
+
+export type Orientation = 'horizontal' | 'vertical';
diff --git a/packages/react/vitest.config.mts b/packages/react/vitest.config.mts
index 199b7b9d04..69894676fd 100644
--- a/packages/react/vitest.config.mts
+++ b/packages/react/vitest.config.mts
@@ -1,3 +1,4 @@
+import * as path from 'path';
 import { mergeConfig, defineProject } from 'vitest/config';
 // eslint-disable-next-line import/no-relative-packages
 import sharedConfig from '../../vitest.shared.mts';
@@ -5,6 +6,11 @@ import sharedConfig from '../../vitest.shared.mts';
 export default mergeConfig(
   sharedConfig,
   defineProject({
+    resolve: {
+      alias: {
+        '@base-ui-components/react': path.join(process.cwd(), 'packages/react/src'),
+      },
+    },
     define: {
       'process.env.NODE_ENV': JSON.stringify('test'),
     },