diff --git a/docs/data/api/toggle-button-group-item.json b/docs/data/api/toggle-button-group-item.json
new file mode 100644
index 0000000000..beedd1982d
--- /dev/null
+++ b/docs/data/api/toggle-button-group-item.json
@@ -0,0 +1,29 @@
+{
+  "props": {
+    "value": { "type": { "name": "string" }, "required": true },
+    "aria-label": { "type": { "name": "string" } },
+    "aria-labelledby": { "type": { "name": "string" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "onPressedChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(pressed: boolean, event: Event) => void",
+        "describedArgs": ["pressed", "event"]
+      }
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ToggleButtonGroupItem",
+  "imports": [
+    "import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';\nconst ToggleButtonGroupItem = ToggleButtonGroup.Item;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleButtonGroupItem",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/react/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-button-group/\">ToggleButtonGroup</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/toggle-button-group-root.json b/docs/data/api/toggle-button-group-root.json
new file mode 100644
index 0000000000..ea5ac76f12
--- /dev/null
+++ b/docs/data/api/toggle-button-group-root.json
@@ -0,0 +1,33 @@
+{
+  "props": {
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultValue": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
+    "direction": {
+      "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
+      "default": "'ltr'"
+    },
+    "onValueChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(groupValue: Array<string>, event: Event) => void",
+        "describedArgs": ["groupValue", "event"]
+      }
+    },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } },
+    "toggleMultiple": { "type": { "name": "bool" }, "default": "false" },
+    "value": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } }
+  },
+  "name": "ToggleButtonGroupRoot",
+  "imports": [
+    "import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';\nconst ToggleButtonGroupRoot = ToggleButtonGroup.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleButtonGroupRoot",
+  "forwardsRefTo": "HTMLDivElement",
+  "filename": "/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-button-group/\">ToggleButtonGroup</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/toggle-button-root.json b/docs/data/api/toggle-button-root.json
new file mode 100644
index 0000000000..b06930d80e
--- /dev/null
+++ b/docs/data/api/toggle-button-root.json
@@ -0,0 +1,31 @@
+{
+  "props": {
+    "aria-label": { "type": { "name": "string" } },
+    "aria-labelledby": { "type": { "name": "string" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultPressed": { "type": { "name": "bool" }, "default": "false" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onPressedChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(pressed: boolean, event: Event) => void",
+        "describedArgs": ["pressed", "event"]
+      }
+    },
+    "pressed": { "type": { "name": "bool" }, "default": "undefined" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ToggleButtonRoot",
+  "imports": [
+    "import { ToggleButton } from '@base-ui-components/react/ToggleButton';\nconst ToggleButtonRoot = ToggleButton.Root;"
+  ],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleButtonRoot",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/react/src/ToggleButton/Root/ToggleButtonRoot.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-button/\">ToggleButton</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/api/toggle-button.json b/docs/data/api/toggle-button.json
new file mode 100644
index 0000000000..57fdd49d01
--- /dev/null
+++ b/docs/data/api/toggle-button.json
@@ -0,0 +1,29 @@
+{
+  "props": {
+    "aria-label": { "type": { "name": "string" } },
+    "aria-labelledby": { "type": { "name": "string" } },
+    "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
+    "defaultPressed": { "type": { "name": "bool" }, "default": "false" },
+    "disabled": { "type": { "name": "bool" }, "default": "false" },
+    "onPressedChange": {
+      "type": { "name": "func" },
+      "signature": {
+        "type": "function(pressed: boolean, event: Event) => void",
+        "describedArgs": ["pressed", "event"]
+      }
+    },
+    "pressed": { "type": { "name": "bool" }, "default": "undefined" },
+    "render": { "type": { "name": "union", "description": "element<br>&#124;&nbsp;func" } }
+  },
+  "name": "ToggleButton",
+  "imports": ["import { ToggleButton } from '@base-ui-components/react/ToggleButton';"],
+  "classes": [],
+  "spread": true,
+  "themeDefaultProps": true,
+  "muiName": "ToggleButton",
+  "forwardsRefTo": "HTMLButtonElement",
+  "filename": "/packages/mui-base/src/ToggleButton/ToggleButton.tsx",
+  "inheritance": null,
+  "demos": "<ul><li><a href=\"/components/react-toggle-button/\">ToggleButton</a></li></ul>",
+  "cssComponent": false
+}
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupIntroduction.js b/docs/data/components/toggle-button-group/ToggleButtonGroupIntroduction.js
new file mode 100644
index 0000000000..6245721b16
--- /dev/null
+++ b/docs/data/components/toggle-button-group/ToggleButtonGroupIntroduction.js
@@ -0,0 +1,77 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupIntroduction() {
+  const [value, setValue] = React.useState(['align-center']);
+  return (
+    <ToggleButtonGroup.Root
+      className={classes.root}
+      value={value}
+      onValueChange={(newValue) => {
+        if (newValue.length > 0) {
+          setValue(newValue);
+        }
+      }}
+      aria-label="Text alignment"
+    >
+      <ToggleButtonGroup.Item
+        className={classes.button}
+        value="align-left"
+        aria-label="Align left"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        className={classes.button}
+        value="align-center"
+        aria-label="Align center"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        className={classes.button}
+        value="align-right"
+        aria-label="Align right"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+    </ToggleButtonGroup.Root>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupIntroduction.tsx b/docs/data/components/toggle-button-group/ToggleButtonGroupIntroduction.tsx
new file mode 100644
index 0000000000..6245721b16
--- /dev/null
+++ b/docs/data/components/toggle-button-group/ToggleButtonGroupIntroduction.tsx
@@ -0,0 +1,77 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupIntroduction() {
+  const [value, setValue] = React.useState(['align-center']);
+  return (
+    <ToggleButtonGroup.Root
+      className={classes.root}
+      value={value}
+      onValueChange={(newValue) => {
+        if (newValue.length > 0) {
+          setValue(newValue);
+        }
+      }}
+      aria-label="Text alignment"
+    >
+      <ToggleButtonGroup.Item
+        className={classes.button}
+        value="align-left"
+        aria-label="Align left"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        className={classes.button}
+        value="align-center"
+        aria-label="Align center"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        className={classes.button}
+        value="align-right"
+        aria-label="Align right"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+    </ToggleButtonGroup.Root>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.js b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.js
new file mode 100644
index 0000000000..56fe6c7c82
--- /dev/null
+++ b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.js
@@ -0,0 +1,68 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupRtl() {
+  return (
+    <div dir="rtl">
+      <ToggleButtonGroup.Root
+        toggleMultiple
+        aria-label="Text formatting"
+        className={classes.root}
+      >
+        <ToggleButtonGroup.Item
+          value="bold"
+          aria-label="Toggle bold"
+          className={classes.button}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <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>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          value="italics"
+          aria-label="Toggle italics"
+          className={classes.button}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <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>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          value="underline"
+          aria-label="Toggle underline"
+          className={classes.button}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <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>
+        </ToggleButtonGroup.Item>
+      </ToggleButtonGroup.Root>
+    </div>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.tsx b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.tsx
new file mode 100644
index 0000000000..56fe6c7c82
--- /dev/null
+++ b/docs/data/components/toggle-button-group/ToggleButtonGroupRtl.tsx
@@ -0,0 +1,68 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupRtl() {
+  return (
+    <div dir="rtl">
+      <ToggleButtonGroup.Root
+        toggleMultiple
+        aria-label="Text formatting"
+        className={classes.root}
+      >
+        <ToggleButtonGroup.Item
+          value="bold"
+          aria-label="Toggle bold"
+          className={classes.button}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <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>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          value="italics"
+          aria-label="Toggle italics"
+          className={classes.button}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <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>
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          value="underline"
+          aria-label="Toggle underline"
+          className={classes.button}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            className={classes.icon}
+          >
+            <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>
+        </ToggleButtonGroup.Item>
+      </ToggleButtonGroup.Root>
+    </div>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupToggleMultiple.js b/docs/data/components/toggle-button-group/ToggleButtonGroupToggleMultiple.js
new file mode 100644
index 0000000000..1cdc80bfab
--- /dev/null
+++ b/docs/data/components/toggle-button-group/ToggleButtonGroupToggleMultiple.js
@@ -0,0 +1,66 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupToggleMultiple() {
+  return (
+    <ToggleButtonGroup.Root
+      toggleMultiple
+      aria-label="Text formatting"
+      className={classes.root}
+    >
+      <ToggleButtonGroup.Item
+        value="bold"
+        aria-label="Toggle bold"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="italics"
+        aria-label="Toggle italics"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="underline"
+        aria-label="Toggle underline"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+    </ToggleButtonGroup.Root>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/ToggleButtonGroupToggleMultiple.tsx b/docs/data/components/toggle-button-group/ToggleButtonGroupToggleMultiple.tsx
new file mode 100644
index 0000000000..1cdc80bfab
--- /dev/null
+++ b/docs/data/components/toggle-button-group/ToggleButtonGroupToggleMultiple.tsx
@@ -0,0 +1,66 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import classes from './styles.module.css';
+
+export default function ToggleButtonGroupToggleMultiple() {
+  return (
+    <ToggleButtonGroup.Root
+      toggleMultiple
+      aria-label="Text formatting"
+      className={classes.root}
+    >
+      <ToggleButtonGroup.Item
+        value="bold"
+        aria-label="Toggle bold"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="italics"
+        aria-label="Toggle italics"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+
+      <ToggleButtonGroup.Item
+        value="underline"
+        aria-label="Toggle underline"
+        className={classes.button}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          className={classes.icon}
+        >
+          <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>
+      </ToggleButtonGroup.Item>
+    </ToggleButtonGroup.Root>
+  );
+}
diff --git a/docs/data/components/toggle-button-group/styles.module.css b/docs/data/components/toggle-button-group/styles.module.css
new file mode 100644
index 0000000000..b0d9b09e68
--- /dev/null
+++ b/docs/data/components/toggle-button-group/styles.module.css
@@ -0,0 +1,66 @@
+.root {
+  display: flex;
+}
+
+.button {
+  --size: 2.5rem;
+  --corner-radius: 0.4rem;
+  --border-color: var(--gray-outline-2);
+  --border-radius-right: 0 var(--corner-radius) var(--corner-radius) 0;
+  --border-radius-left: var(--corner-radius) 0 0 var(--corner-radius);
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  height: var(--size);
+  width: var(--size);
+  border: 1px solid var(--border-color);
+  background-color: var(--gray-container-2);
+  color: var(--gray-400);
+}
+
+.button:first-child {
+  border-radius: var(--border-radius-left);
+  border-right-color: transparent;
+}
+
+.button:last-child {
+  border-radius: var(--border-radius-right);
+  border-left-color: transparent;
+}
+
+[dir='rtl'] .button:first-child {
+  border-radius: var(--border-radius-right);
+}
+
+[dir='rtl'] .button:last-child {
+  border-radius: var(--border-radius-left);
+}
+
+.button:not(:disabled):hover {
+  background-color: var(--gray-surface-1);
+  outline: 1px solid var(--gray-500);
+  outline-offset: -1px;
+  color: var(--gray-text-2);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--color-violet);
+  z-index: 1;
+}
+
+.icon {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.button[data-pressed] {
+  background-color: #fefefe;
+  color: var(--gray-text-2);
+}
diff --git a/docs/data/components/toggle-button-group/toggle-button-group.mdx b/docs/data/components/toggle-button-group/toggle-button-group.mdx
new file mode 100644
index 0000000000..adc563dd8e
--- /dev/null
+++ b/docs/data/components/toggle-button-group/toggle-button-group.mdx
@@ -0,0 +1,134 @@
+---
+productId: base-ui
+title: React ToggleButtonGroup component
+description: ToggleButtonGroup provides a set of two-state buttons that can either be off (not pressed) or on (pressed).
+components: ToggleButtonGroupRoot, ToggleButtonGroupItem
+githubLabel: 'component: toggle button'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radio-group/
+packageName: '@base-ui-components/react'
+---
+
+# ToggleButtonGroup
+
+<Description />
+
+<ComponentLinkHeader design={false} />
+
+<Demo demo="ToggleButtonGroupIntroduction" defaultCodeOpen="false" bg="gradient" />
+
+## Installation
+
+<InstallationInstructions componentName="ToggleButtonGroup" />
+
+## Anatomy
+
+ToggleButtonGroups are composed with two components:
+
+- `<ToggleButtonGroup.Root />` is the outer component that wraps a set of [`toggle buttons`](/components/react-toggle-button)
+- `<ToggleButtonGroup.Item />`s renders the `<button>`
+
+```tsx
+<ToggleButtonGroup.Root>
+  <ToggleButtonGroup.Item value="bold">Bold</ToggleButtonGroup.Item>
+  <ToggleButtonGroup.Item value="italics">Italics</ToggleButtonGroup.Item>
+  <ToggleButtonGroup.Item value="underline">Underline</ToggleButtonGroup.Item>
+</ToggleButtonGroup.Root>
+```
+
+## Value
+
+Each `Item` in the group must be given a unique value, e.g. a string like `'bold'`, `'italics'` in the examples above.
+
+### Uncontrolled
+
+When uncontrolled, use the `defaultValue` prop to set the initial state of the group:
+
+```tsx
+// only the "Italics" button is initially pressed
+<ToggleButtonGroup.Root defaultValue={['italics']}>
+  <ToggleButtonGroup.Item value="bold">Bold</ToggleButtonGroup.Item>
+  <ToggleButtonGroup.Item value="italics">Italics</ToggleButtonGroup.Item>
+  <ToggleButtonGroup.Item value="underline">Underline</ToggleButtonGroup.Item>
+</ToggleButtonGroup.Root>
+```
+
+### Controlled
+
+When controlled, pass the `value` and `onValueChange` props to `ToggleButtonGroup.Root`:
+
+```tsx
+const [value, setValue] = React.useState(['align-center']);
+
+return (
+  <ToggleButtonGroup.Root value={value} onValueChange={setValue}>
+    <ToggleButtonGroup.Item value="align-left" />
+    <ToggleButtonGroup.Item value="align-center" />
+    <ToggleButtonGroup.Item value="align-right" />
+  </ToggleButtonGroup.Root>
+);
+```
+
+## Customization
+
+### Allow multiple buttons to be pressed
+
+Use the `toggleMultiple` prop to allow multiple buttons to be pressed at the same time:
+
+```tsx
+<ToggleButtonGroup.Root toggleMultiple>
+  <ToggleButtonGroup.Item value="bold" />
+  <ToggleButtonGroup.Item value="italics" />
+  <ToggleButtonGroup.Item value="underline" />
+</ToggleButtonGroup.Root>
+```
+
+<Demo demo="ToggleButtonGroupToggleMultiple" />
+
+### One button must be pressed
+
+Use controlled mode to always keep one button in the pressed state:
+
+```tsx
+const [value, setValue] = React.useState(['align-left']);
+
+const handleValueChange = (newValue) => {
+  if (newValue.length > 0) {
+    setValue(newValue);
+  }
+};
+
+return (
+  <ToggleButtonGroup.Root value={value} onValueChange={handleValueChange}>
+    <ToggleButtonGroup.Item value="align-left" />
+    <ToggleButtonGroup.Item value="align-center" />
+    <ToggleButtonGroup.Item value="align-right" />
+  </ToggleButtonGroup.Root>
+);
+```
+
+## RTL
+
+Place the toggle button group in a HTML element or component with the `dir="rtl"` attribute to reverse directional keys for RTL languages:
+
+```jsx
+<html dir="rtl">
+  <body>
+    <ToggleButtonGroup.Root /> {/* RTL */}
+  </body>
+<html>
+```
+
+The `direction` prop can override this:
+
+```jsx
+<div dir="ltr">
+  <ToggleButtonGroup.Root direction="rtl" /> {/* RTL */}
+<div>
+```
+
+<Demo demo="ToggleButtonGroupRtl" />
+
+## Accessibility
+
+- The `Root` component, and every `Item` must be given must be given an accessible name with `aria-label` or `aria-labelledby`.
+- The `Item`'s label or accessible name _must not_ change based on the pressed state to ensure a smooth screen-reader experience, otherwise it may duplicate the announcement of the pressed state based on `aria-pressed`.
diff --git a/docs/data/components/toggle-button/ToggleButtonIntroduction.js b/docs/data/components/toggle-button/ToggleButtonIntroduction.js
new file mode 100644
index 0000000000..f0a607b4f0
--- /dev/null
+++ b/docs/data/components/toggle-button/ToggleButtonIntroduction.js
@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { ToggleButton } from '@base-ui-components/react/ToggleButton';
+import classes from './styles.module.css';
+
+export default function ToggleButtonIntroduction() {
+  const [pressed, setPressed] = React.useState(false);
+  return (
+    <ToggleButton
+      pressed={pressed}
+      onPressedChange={setPressed}
+      className={classes.button}
+      aria-label="Bookmark this article"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        className={classes.icon}
+      >
+        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+      </svg>
+    </ToggleButton>
+  );
+}
diff --git a/docs/data/components/toggle-button/ToggleButtonIntroduction.tsx b/docs/data/components/toggle-button/ToggleButtonIntroduction.tsx
new file mode 100644
index 0000000000..f0a607b4f0
--- /dev/null
+++ b/docs/data/components/toggle-button/ToggleButtonIntroduction.tsx
@@ -0,0 +1,26 @@
+'use client';
+import * as React from 'react';
+import { ToggleButton } from '@base-ui-components/react/ToggleButton';
+import classes from './styles.module.css';
+
+export default function ToggleButtonIntroduction() {
+  const [pressed, setPressed] = React.useState(false);
+  return (
+    <ToggleButton
+      pressed={pressed}
+      onPressedChange={setPressed}
+      className={classes.button}
+      aria-label="Bookmark this article"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        className={classes.icon}
+      >
+        <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+      </svg>
+    </ToggleButton>
+  );
+}
diff --git a/docs/data/components/toggle-button/ToggleButtonIntroduction.tsx.preview b/docs/data/components/toggle-button/ToggleButtonIntroduction.tsx.preview
new file mode 100644
index 0000000000..3109ca040b
--- /dev/null
+++ b/docs/data/components/toggle-button/ToggleButtonIntroduction.tsx.preview
@@ -0,0 +1,16 @@
+<ToggleButton
+  pressed={pressed}
+  onPressedChange={setPressed}
+  className={classes.button}
+  aria-label="Bookmark this article"
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    className={classes.icon}
+  >
+    <path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z" />
+  </svg>
+</ToggleButton>
\ No newline at end of file
diff --git a/docs/data/components/toggle-button/styles.module.css b/docs/data/components/toggle-button/styles.module.css
new file mode 100644
index 0000000000..1c18fed1ca
--- /dev/null
+++ b/docs/data/components/toggle-button/styles.module.css
@@ -0,0 +1,38 @@
+.button {
+  --size: 2.5rem;
+  --corner: 0.4rem;
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  height: var(--size);
+  width: var(--size);
+  border: 1px solid var(--gray-outline-2);
+  border-radius: var(--corner);
+  background-color: var(--gray-container-1);
+  color: var(--gray-text-1);
+}
+
+.button:hover {
+  background-color: var(--gray-surface-1);
+  color: var(--gray-text-2);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--color-violet);
+}
+
+.icon {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.button[data-pressed] .icon {
+  color: var(--gray-text-2);
+  fill: currentColor;
+  stroke-width: 0;
+}
diff --git a/docs/data/components/toggle-button/toggle-button.mdx b/docs/data/components/toggle-button/toggle-button.mdx
new file mode 100644
index 0000000000..54aa15635c
--- /dev/null
+++ b/docs/data/components/toggle-button/toggle-button.mdx
@@ -0,0 +1,75 @@
+---
+productId: base-ui
+title: React ToggleButton component
+description: Toggle Buttons are a two-state button that can either be off (not pressed) or on (pressed).
+components: ToggleButtonRoot
+githubLabel: 'component: toggle button'
+waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+packageName: '@base-ui-components/react'
+---
+
+# ToggleButton
+
+<Description />
+
+<ComponentLinkHeader design={false} />
+
+<Demo demo="ToggleButtonIntroduction" defaultCodeOpen="false" bg="gradient" />
+
+## Installation
+
+<InstallationInstructions componentName="ToggleButton" />
+
+## Anatomy
+
+ToggleButton is a single component that renders a `<button>`:
+
+```tsx
+<ToggleButton>Toggle bookmark</ToggleButton>
+```
+
+## Controlled
+
+Use the `pressed` and `onPressedChange` props to control the pressed state:
+
+```jsx
+const [pressed, setPressed] = React.useState(false);
+
+<ToggleButton pressed={pressed} onPressedChange={setPressed}>
+  {/* children */}
+</ToggleButton>;
+```
+
+## Uncontrolled
+
+Use the `defaultPressed` prop to set the initial pressed state of the component when uncontrolled:
+
+```jsx
+<ToggleButton defaultPressed={false}>{/* children */}</ToggleButton>
+```
+
+## Accessibility
+
+ToggleButtons must be given an accessible name with `aria-label` or `aria-labelledby`. It is important that the label does not change based on the pressed state to ensure a smooth screen-reader experience, since announcing the pressed state is already handled by `aria-pressed`.
+
+## Styling
+
+Use the `[data-pressed]` attribute to apply styles based on the pressed state:
+
+```jsx
+<ToggleButton className="MyToggle">{/* children */}</ToggleButton>
+```
+
+```css
+/* base state, not pressed */
+.MyToggle {
+  background: white;
+  color: black;
+}
+
+/* pressed state */
+.MyToggle[data-pressed] {
+  background: black;
+  color: white;
+}
+```
diff --git a/docs/data/pages.ts b/docs/data/pages.ts
index b0efde5018..600397b593 100644
--- a/docs/data/pages.ts
+++ b/docs/data/pages.ts
@@ -44,6 +44,8 @@ const pages: readonly RouteMetadata[] = [
       { pathname: '/components/react-switch', title: 'Switch' },
       { pathname: '/components/react-tabs', title: 'Tabs' },
       { pathname: '/components/react-text-input', title: 'Text Input' },
+      { pathname: '/components/react-toggle-button', title: 'Toggle Button' },
+      { pathname: '/components/react-toggle-button-group', title: 'Toggle Button Group' },
       { pathname: '/components/react-tooltip', title: 'Tooltip' },
     ],
   },
diff --git a/docs/data/translations/api-docs/toggle-button-group-item/toggle-button-group-item.json b/docs/data/translations/api-docs/toggle-button-group-item/toggle-button-group-item.json
new file mode 100644
index 0000000000..d8232c78d9
--- /dev/null
+++ b/docs/data/translations/api-docs/toggle-button-group-item/toggle-button-group-item.json
@@ -0,0 +1,24 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "aria-label": { "description": "The label for the toggle button." },
+    "aria-labelledby": {
+      "description": "An id or space-separated list of ids of elements that label the toggle button."
+    },
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "onPressedChange": {
+      "description": "Callback fired when the pressed state is changed.",
+      "typeDescriptions": {
+        "pressed": "The new pressed state.",
+        "event": "The event source of the callback."
+      }
+    },
+    "render": { "description": "A function to customize rendering of the component." },
+    "value": {
+      "description": "A unique string that identifies the component when used inside a ToggleButtonGroup"
+    }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/data/translations/api-docs/toggle-button-group-root/toggle-button-group-root.json b/docs/data/translations/api-docs/toggle-button-group-root/toggle-button-group-root.json
new file mode 100644
index 0000000000..40f2121541
--- /dev/null
+++ b/docs/data/translations/api-docs/toggle-button-group-root/toggle-button-group-root.json
@@ -0,0 +1,27 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "defaultValue": {
+      "description": "The open state of the ToggleButtonGroup represented by an array of the values of all pressed <code>&lt;ToggleButtonGroup.Item/&gt;</code>s This is the uncontrolled counterpart of <code>value</code>."
+    },
+    "direction": { "description": "Text direction" },
+    "onValueChange": {
+      "description": "Callback fired when the pressed states of the ToggleButtonGroup changes.",
+      "typeDescriptions": {
+        "groupValue": "An array of the <code>value</code>s of all the pressed items.",
+        "event": "The event source of the callback."
+      }
+    },
+    "render": { "description": "A function to customize rendering of the component." },
+    "toggleMultiple": {
+      "description": "When <code>false</code> only one item in the group can be pressed. If any item in the group becomes pressed, the others will become unpressed. When <code>true</code> multiple items can be pressed."
+    },
+    "value": {
+      "description": "The open state of the ToggleButtonGroup represented by an array of the values of all pressed <code>&lt;ToggleButtonGroup.Item/&gt;</code>s This is the controlled counterpart of <code>defaultValue</code>."
+    }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/data/translations/api-docs/toggle-button-root/toggle-button-root.json b/docs/data/translations/api-docs/toggle-button-root/toggle-button-root.json
new file mode 100644
index 0000000000..61c1df289b
--- /dev/null
+++ b/docs/data/translations/api-docs/toggle-button-root/toggle-button-root.json
@@ -0,0 +1,26 @@
+{
+  "componentDescription": "",
+  "propDescriptions": {
+    "aria-label": { "description": "The label for the ToggleButton." },
+    "aria-labelledby": {
+      "description": "An id or space-separated list of ids of elements that label the ToggleButton."
+    },
+    "className": {
+      "description": "Class names applied to the element or a function that returns them based on the component&#39;s state."
+    },
+    "defaultPressed": {
+      "description": "The default pressed state. Use when the component is not controlled."
+    },
+    "disabled": { "description": "If <code>true</code>, the component is disabled." },
+    "onPressedChange": {
+      "description": "Callback fired when the pressed state is changed.",
+      "typeDescriptions": {
+        "pressed": "The new pressed state.",
+        "event": "The event source of the callback."
+      }
+    },
+    "pressed": { "description": "If <code>true</code>, the component is pressed." },
+    "render": { "description": "A function to customize rendering of the component." }
+  },
+  "classDescriptions": {}
+}
diff --git a/docs/reference/generated/toggle-button-group-item.json b/docs/reference/generated/toggle-button-group-item.json
new file mode 100644
index 0000000000..69a7f9b657
--- /dev/null
+++ b/docs/reference/generated/toggle-button-group-item.json
@@ -0,0 +1,31 @@
+{
+  "name": "ToggleButtonGroupItem",
+  "description": "",
+  "props": {
+    "value": {
+      "type": "string",
+      "required": true,
+      "description": "A unique string that identifies the component when used\ninside a ToggleButtonGroup"
+    },
+    "aria-label": {
+      "type": "string",
+      "description": "The label for the toggle button."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "description": "An id or space-separated list of ids of elements that label the toggle button."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "onPressedChange": {
+      "type": "function(pressed: boolean, event: Event) => void",
+      "description": "Callback fired when the pressed state is changed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}
diff --git a/docs/reference/generated/toggle-button-group-root.json b/docs/reference/generated/toggle-button-group-root.json
new file mode 100644
index 0000000000..52a942eb9a
--- /dev/null
+++ b/docs/reference/generated/toggle-button-group-root.json
@@ -0,0 +1,36 @@
+{
+  "name": "ToggleButtonGroupRoot",
+  "description": "",
+  "props": {
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "defaultValue": {
+      "type": "string[]",
+      "description": "The open state of the ToggleButtonGroup represented by an array of\nthe values of all pressed `<ToggleButtonGroup.Item/>`s\nThis is the uncontrolled counterpart of `value`."
+    },
+    "direction": {
+      "type": "'ltr' | 'rtl'",
+      "default": "'ltr'",
+      "description": "Text direction"
+    },
+    "onValueChange": {
+      "type": "function(groupValue: Array<string>, event: Event) => void",
+      "description": "Callback fired when the pressed states of the ToggleButtonGroup changes."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    },
+    "toggleMultiple": {
+      "type": "boolean",
+      "default": "false",
+      "description": "When `false` only one item in the group can be pressed. If any item in\nthe group becomes pressed, the others will become unpressed.\nWhen `true` multiple items can be pressed."
+    },
+    "value": {
+      "type": "string[]",
+      "description": "The open state of the ToggleButtonGroup represented by an array of\nthe values of all pressed `<ToggleButtonGroup.Item/>`s\nThis is the controlled counterpart of `defaultValue`."
+    }
+  }
+}
diff --git a/docs/reference/generated/toggle-button-root.json b/docs/reference/generated/toggle-button-root.json
new file mode 100644
index 0000000000..b481de2adc
--- /dev/null
+++ b/docs/reference/generated/toggle-button-root.json
@@ -0,0 +1,41 @@
+{
+  "name": "ToggleButtonRoot",
+  "description": "",
+  "props": {
+    "aria-label": {
+      "type": "string",
+      "description": "The label for the ToggleButton."
+    },
+    "aria-labelledby": {
+      "type": "string",
+      "description": "An id or space-separated list of ids of elements that label the ToggleButton."
+    },
+    "className": {
+      "type": "string | (state) => string",
+      "description": "Class names applied to the element or a function that returns them based on the component's state."
+    },
+    "defaultPressed": {
+      "type": "boolean",
+      "default": "false",
+      "description": "The default pressed state. Use when the component is not controlled."
+    },
+    "disabled": {
+      "type": "boolean",
+      "default": "false",
+      "description": "If `true`, the component is disabled."
+    },
+    "onPressedChange": {
+      "type": "function(pressed: boolean, event: Event) => void",
+      "description": "Callback fired when the pressed state is changed."
+    },
+    "pressed": {
+      "type": "boolean",
+      "default": "undefined",
+      "description": "If `true`, the component is pressed."
+    },
+    "render": {
+      "type": "React.ReactElement | (props, state) => React.ReactElement",
+      "description": "A function to customize rendering of the component."
+    }
+  }
+}
diff --git a/docs/src/app/experiments/toggle-group.tsx b/docs/src/app/experiments/toggle-group.tsx
new file mode 100644
index 0000000000..552670f668
--- /dev/null
+++ b/docs/src/app/experiments/toggle-group.tsx
@@ -0,0 +1,178 @@
+'use client';
+import * as React from 'react';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import classes from './toggle.module.css';
+
+export default function ToggleButtonGroupDemo() {
+  const [value, setValue] = React.useState(['align-center']);
+  return (
+    <div className={classes.grid}>
+      <h4 style={{ margin: 0 }}>LTR</h4>
+
+      <ToggleButtonGroup.Root
+        value={value}
+        onValueChange={(newValue) => {
+          // one button must always remain pressed
+          if (newValue.length > 0) {
+            setValue(newValue);
+          }
+        }}
+        aria-label="Text alignment"
+        className={classes.group}
+      >
+        <ToggleButtonGroup.Item
+          value="align-left"
+          aria-label="Align left"
+          className={classes.button}
+        >
+          <AlignLeftIcon />
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          value="align-center"
+          aria-label="Align center"
+          className={classes.button}
+        >
+          <AlignCenterIcon />
+        </ToggleButtonGroup.Item>
+
+        <ToggleButtonGroup.Item
+          value="align-right"
+          aria-label="Align right"
+          className={classes.button}
+        >
+          <AlignRightIcon />
+        </ToggleButtonGroup.Item>
+      </ToggleButtonGroup.Root>
+
+      <h4 style={{ margin: 0 }}>RTL</h4>
+
+      <div dir="rtl">
+        <div>
+          <div>
+            <ToggleButtonGroup.Root
+              toggleMultiple
+              aria-label="Text formatting"
+              className={classes.group}
+            >
+              <ToggleButtonGroup.Item
+                value="bold"
+                aria-label="Toggle bold"
+                className={classes.button}
+              >
+                <BoldIcon />
+              </ToggleButtonGroup.Item>
+
+              <ToggleButtonGroup.Item
+                value="italics"
+                aria-label="Toggle italics"
+                className={classes.button}
+              >
+                <ItalicsIcon />
+              </ToggleButtonGroup.Item>
+
+              <ToggleButtonGroup.Item
+                value="underline"
+                aria-label="Toggle underline"
+                className={classes.button}
+              >
+                <UnderlineIcon />
+              </ToggleButtonGroup.Item>
+            </ToggleButtonGroup.Root>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AlignLeftIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <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>
+  );
+}
+
+function AlignCenterIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <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>
+  );
+}
+
+function AlignRightIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <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>
+  );
+}
+
+function BoldIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <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>
+  );
+}
+
+function ItalicsIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <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>
+  );
+}
+
+function UnderlineIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+    >
+      <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>
+  );
+}
diff --git a/docs/src/app/experiments/toggle.module.css b/docs/src/app/experiments/toggle.module.css
new file mode 100644
index 0000000000..3aad075232
--- /dev/null
+++ b/docs/src/app/experiments/toggle.module.css
@@ -0,0 +1,75 @@
+.grid {
+  display: grid;
+  grid-gap: 2rem;
+}
+
+.group {
+  display: flex;
+}
+
+.button {
+  --size: 2.5rem;
+  --corner-radius: 0.4rem;
+  --border-color: var(--gray-outline-2);
+  --border-radius-right: 0 var(--corner-radius) var(--corner-radius) 0;
+  --border-radius-left: var(--corner-radius) 0 0 var(--corner-radius);
+
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
+  height: var(--size);
+  width: var(--size);
+  border: 1px solid var(--border-color);
+  background-color: var(--gray-container-2);
+  color: var(--gray-400);
+}
+
+.button:disabled {
+  cursor: not-allowed;
+}
+
+.button:first-child {
+  border-radius: var(--border-radius-left);
+  border-right-color: transparent;
+}
+
+.button:last-child {
+  border-radius: var(--border-radius-right);
+  border-left-color: transparent;
+}
+
+[dir='rtl'] .button:first-child {
+  border-radius: var(--border-radius-right);
+}
+
+[dir='rtl'] .button:last-child {
+  border-radius: var(--border-radius-left);
+}
+
+.button:not(:disabled):hover {
+  background-color: var(--gray-surface-1);
+  outline: 1px solid var(--gray-500);
+  outline-offset: -1px;
+  color: var(--gray-text-2);
+  cursor: pointer;
+  z-index: 1;
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--gray-900);
+  z-index: 1;
+}
+
+.button svg {
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.button[data-pressed] {
+  background-color: #fefefe;
+  color: var(--gray-text-2);
+}
diff --git a/packages/react/src/Composite/Item/CompositeItem.tsx b/packages/react/src/Composite/Item/CompositeItem.tsx
index 8b87646048..fac4c94c76 100644
--- a/packages/react/src/Composite/Item/CompositeItem.tsx
+++ b/packages/react/src/Composite/Item/CompositeItem.tsx
@@ -21,7 +21,7 @@ const CompositeItem = React.forwardRef(function CompositeItem(
 
   const ownerState: CompositeItem.OwnerState = React.useMemo(
     () => ({
-      active: index === activeIndex,
+      highlighted: index === activeIndex,
     }),
     [index, activeIndex],
   );
@@ -42,7 +42,7 @@ const CompositeItem = React.forwardRef(function CompositeItem(
 
 namespace CompositeItem {
   export interface OwnerState {
-    active: boolean;
+    highlighted: boolean;
   }
 
   export interface Props extends BaseUIComponentProps<'div', OwnerState> {}
diff --git a/packages/react/src/Composite/Root/CompositeRoot.test.tsx b/packages/react/src/Composite/Root/CompositeRoot.test.tsx
index 401729c9ca..85a4da1ae9 100644
--- a/packages/react/src/Composite/Root/CompositeRoot.test.tsx
+++ b/packages/react/src/Composite/Root/CompositeRoot.test.tsx
@@ -36,29 +36,29 @@ describe('Composite', () => {
 
       act(() => item1.focus());
 
-      expect(item1).to.have.attribute('data-active');
+      expect(item1).to.have.attribute('data-highlighted');
 
       fireEvent.keyDown(item1, { key: 'ArrowDown' });
       await flushMicrotasks();
-      expect(item2).to.have.attribute('data-active');
+      expect(item2).to.have.attribute('data-highlighted');
       expect(item2).to.have.attribute('tabindex', '0');
       expect(item2).toHaveFocus();
 
       fireEvent.keyDown(item2, { key: 'ArrowDown' });
       await flushMicrotasks();
-      expect(item3).to.have.attribute('data-active');
+      expect(item3).to.have.attribute('data-highlighted');
       expect(item3).to.have.attribute('tabindex', '0');
       expect(item3).toHaveFocus();
 
       fireEvent.keyDown(item3, { key: 'ArrowUp' });
       await flushMicrotasks();
-      expect(item2).to.have.attribute('data-active');
+      expect(item2).to.have.attribute('data-highlighted');
       expect(item2).to.have.attribute('tabindex', '0');
       expect(item2).toHaveFocus();
 
       fireEvent.keyDown(item2, { key: 'ArrowUp' });
       await flushMicrotasks();
-      expect(item1).to.have.attribute('data-active');
+      expect(item1).to.have.attribute('data-highlighted');
       expect(item1).to.have.attribute('tabindex', '0');
       expect(item1).toHaveFocus();
     });
@@ -78,29 +78,29 @@ describe('Composite', () => {
 
       act(() => item1.focus());
 
-      expect(item1).to.have.attribute('data-active');
+      expect(item1).to.have.attribute('data-highlighted');
 
       fireEvent.keyDown(item1, { key: 'ArrowDown' });
       await flushMicrotasks();
-      expect(item2).to.have.attribute('data-active');
+      expect(item2).to.have.attribute('data-highlighted');
       expect(item2).to.have.attribute('tabindex', '0');
       expect(item2).toHaveFocus();
 
       fireEvent.keyDown(item2, { key: 'ArrowDown' });
       await flushMicrotasks();
-      expect(item3).to.have.attribute('data-active');
+      expect(item3).to.have.attribute('data-highlighted');
       expect(item3).to.have.attribute('tabindex', '0');
       expect(item3).toHaveFocus();
 
       fireEvent.keyDown(item3, { key: 'ArrowUp' });
       await flushMicrotasks();
-      expect(item2).to.have.attribute('data-active');
+      expect(item2).to.have.attribute('data-highlighted');
       expect(item2).to.have.attribute('tabindex', '0');
       expect(item2).toHaveFocus();
 
       fireEvent.keyDown(item2, { key: 'ArrowUp' });
       await flushMicrotasks();
-      expect(item1).to.have.attribute('data-active');
+      expect(item1).to.have.attribute('data-highlighted');
       expect(item1).to.have.attribute('tabindex', '0');
       expect(item1).toHaveFocus();
     });
@@ -119,11 +119,11 @@ describe('Composite', () => {
         const item3 = getByTestId('3');
 
         act(() => item3.focus());
-        expect(item3).to.have.attribute('data-active');
+        expect(item3).to.have.attribute('data-highlighted');
 
         fireEvent.keyDown(item3, { key: 'Home' });
         await flushMicrotasks();
-        expect(item1).to.have.attribute('data-active');
+        expect(item1).to.have.attribute('data-highlighted');
         expect(item1).to.have.attribute('tabindex', '0');
         expect(item1).toHaveFocus();
       });
@@ -141,11 +141,11 @@ describe('Composite', () => {
         const item3 = getByTestId('3');
 
         act(() => item1.focus());
-        expect(item1).to.have.attribute('data-active');
+        expect(item1).to.have.attribute('data-highlighted');
 
         fireEvent.keyDown(item1, { key: 'End' });
         await flushMicrotasks();
-        expect(item3).to.have.attribute('data-active');
+        expect(item3).to.have.attribute('data-highlighted');
         expect(item3).to.have.attribute('tabindex', '0');
         expect(item3).toHaveFocus();
       });
@@ -169,40 +169,40 @@ describe('Composite', () => {
 
         act(() => item1.focus());
 
-        expect(item1).to.have.attribute('data-active');
+        expect(item1).to.have.attribute('data-highlighted');
 
         fireEvent.keyDown(item1, { key: 'ArrowDown' });
         await flushMicrotasks();
-        expect(item1).to.have.attribute('data-active');
+        expect(item1).to.have.attribute('data-highlighted');
 
         fireEvent.keyDown(item1, { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(item2).to.have.attribute('data-active');
+        expect(item2).to.have.attribute('data-highlighted');
         expect(item2).to.have.attribute('tabindex', '0');
         expect(item2).toHaveFocus();
 
         fireEvent.keyDown(item2, { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(item3).to.have.attribute('data-active');
+        expect(item3).to.have.attribute('data-highlighted');
         expect(item3).to.have.attribute('tabindex', '0');
         expect(item3).toHaveFocus();
 
         fireEvent.keyDown(item3, { key: 'ArrowRight' });
         await flushMicrotasks();
-        expect(item2).to.have.attribute('data-active');
+        expect(item2).to.have.attribute('data-highlighted');
         expect(item2).to.have.attribute('tabindex', '0');
         expect(item2).toHaveFocus();
 
         fireEvent.keyDown(item2, { key: 'ArrowRight' });
         await flushMicrotasks();
-        expect(item1).to.have.attribute('data-active');
+        expect(item1).to.have.attribute('data-highlighted');
         expect(item1).to.have.attribute('tabindex', '0');
         expect(item1).toHaveFocus();
 
         // loop backward
         fireEvent.keyDown(item1, { key: 'ArrowRight' });
         await flushMicrotasks();
-        expect(item3).to.have.attribute('data-active');
+        expect(item3).to.have.attribute('data-highlighted');
         expect(item3).to.have.attribute('tabindex', '0');
         expect(item3).toHaveFocus();
       });
@@ -224,41 +224,41 @@ describe('Composite', () => {
 
         act(() => item1.focus());
 
-        expect(item1).to.have.attribute('data-active');
+        expect(item1).to.have.attribute('data-highlighted');
 
         fireEvent.keyDown(item1, { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(item2).to.have.attribute('data-active');
+        expect(item2).to.have.attribute('data-highlighted');
         expect(item2).to.have.attribute('tabindex', '0');
         expect(item2).toHaveFocus();
 
         fireEvent.keyDown(item2, { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(item3).to.have.attribute('data-active');
+        expect(item3).to.have.attribute('data-highlighted');
         expect(item3).to.have.attribute('tabindex', '0');
         expect(item3).toHaveFocus();
 
         fireEvent.keyDown(item3, { key: 'ArrowRight' });
         await flushMicrotasks();
-        expect(item2).to.have.attribute('data-active');
+        expect(item2).to.have.attribute('data-highlighted');
         expect(item2).to.have.attribute('tabindex', '0');
         expect(item2).toHaveFocus();
 
         fireEvent.keyDown(item2, { key: 'ArrowRight' });
         await flushMicrotasks();
-        expect(item1).to.have.attribute('data-active');
+        expect(item1).to.have.attribute('data-highlighted');
         expect(item1).to.have.attribute('tabindex', '0');
         expect(item1).toHaveFocus();
 
         fireEvent.keyDown(item1, { key: 'ArrowDown' });
         await flushMicrotasks();
-        expect(item2).to.have.attribute('data-active');
+        expect(item2).to.have.attribute('data-highlighted');
         expect(item2).to.have.attribute('tabindex', '0');
         expect(item2).toHaveFocus();
 
         fireEvent.keyDown(item2, { key: 'ArrowDown' });
         await flushMicrotasks();
-        expect(item3).to.have.attribute('data-active');
+        expect(item3).to.have.attribute('data-highlighted');
         expect(item3).to.have.attribute('tabindex', '0');
         expect(item3).toHaveFocus();
       });
@@ -283,51 +283,51 @@ describe('Composite', () => {
       const { getByTestId } = await render(<App />);
 
       act(() => getByTestId('1').focus());
-      expect(getByTestId('1')).to.have.attribute('data-active');
+      expect(getByTestId('1')).to.have.attribute('data-highlighted');
 
       fireEvent.keyDown(getByTestId('1'), { key: 'ArrowDown' });
       await flushMicrotasks();
-      expect(getByTestId('4')).to.have.attribute('data-active');
+      expect(getByTestId('4')).to.have.attribute('data-highlighted');
       expect(getByTestId('4')).to.have.attribute('tabindex', '0');
       expect(getByTestId('4')).toHaveFocus();
 
       fireEvent.keyDown(getByTestId('4'), { key: 'ArrowRight' });
       await flushMicrotasks();
-      expect(getByTestId('5')).to.have.attribute('data-active');
+      expect(getByTestId('5')).to.have.attribute('data-highlighted');
       expect(getByTestId('5')).to.have.attribute('tabindex', '0');
       expect(getByTestId('5')).toHaveFocus();
 
       fireEvent.keyDown(getByTestId('5'), { key: 'ArrowDown' });
       await flushMicrotasks();
-      expect(getByTestId('8')).to.have.attribute('data-active');
+      expect(getByTestId('8')).to.have.attribute('data-highlighted');
       expect(getByTestId('8')).to.have.attribute('tabindex', '0');
       expect(getByTestId('8')).toHaveFocus();
 
       fireEvent.keyDown(getByTestId('8'), { key: 'ArrowLeft' });
       await flushMicrotasks();
-      expect(getByTestId('7')).to.have.attribute('data-active');
+      expect(getByTestId('7')).to.have.attribute('data-highlighted');
       expect(getByTestId('7')).to.have.attribute('tabindex', '0');
       expect(getByTestId('7')).toHaveFocus();
 
       fireEvent.keyDown(getByTestId('7'), { key: 'ArrowUp' });
       await flushMicrotasks();
-      expect(getByTestId('4')).to.have.attribute('data-active');
+      expect(getByTestId('4')).to.have.attribute('data-highlighted');
       expect(getByTestId('4')).to.have.attribute('tabindex', '0');
       expect(getByTestId('4')).toHaveFocus();
 
       act(() => getByTestId('9').focus());
       await flushMicrotasks();
-      expect(getByTestId('9')).to.have.attribute('data-active');
+      expect(getByTestId('9')).to.have.attribute('data-highlighted');
       expect(getByTestId('9')).to.have.attribute('tabindex', '0');
 
       fireEvent.keyDown(getByTestId('9'), { key: 'Home' });
       await flushMicrotasks();
-      expect(getByTestId('1')).to.have.attribute('data-active');
+      expect(getByTestId('1')).to.have.attribute('data-highlighted');
       expect(getByTestId('1')).to.have.attribute('tabindex', '0');
 
       fireEvent.keyDown(getByTestId('1'), { key: 'End' });
       await flushMicrotasks();
-      expect(getByTestId('9')).to.have.attribute('data-active');
+      expect(getByTestId('9')).to.have.attribute('data-highlighted');
       expect(getByTestId('9')).to.have.attribute('tabindex', '0');
     });
 
@@ -346,40 +346,40 @@ describe('Composite', () => {
         );
 
         act(() => getByTestId('1').focus());
-        expect(getByTestId('1')).to.have.attribute('data-active');
+        expect(getByTestId('1')).to.have.attribute('data-highlighted');
 
         fireEvent.keyDown(getByTestId('1'), { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(getByTestId('2')).to.have.attribute('data-active');
+        expect(getByTestId('2')).to.have.attribute('data-highlighted');
         expect(getByTestId('2')).to.have.attribute('tabindex', '0');
         expect(getByTestId('2')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('2'), { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(getByTestId('3')).to.have.attribute('data-active');
+        expect(getByTestId('3')).to.have.attribute('data-highlighted');
         expect(getByTestId('3')).to.have.attribute('tabindex', '0');
         expect(getByTestId('3')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('3'), { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(getByTestId('4')).to.have.attribute('data-active');
+        expect(getByTestId('4')).to.have.attribute('data-highlighted');
         expect(getByTestId('4')).to.have.attribute('tabindex', '0');
         expect(getByTestId('4')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('4'), { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(getByTestId('5')).to.have.attribute('data-active');
+        expect(getByTestId('5')).to.have.attribute('data-highlighted');
         expect(getByTestId('5')).to.have.attribute('tabindex', '0');
         expect(getByTestId('5')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('5'), { key: 'Home' });
         await flushMicrotasks();
-        expect(getByTestId('1')).to.have.attribute('data-active');
+        expect(getByTestId('1')).to.have.attribute('data-highlighted');
         expect(getByTestId('1')).to.have.attribute('tabindex', '0');
 
         fireEvent.keyDown(getByTestId('1'), { key: 'End' });
         await flushMicrotasks();
-        expect(getByTestId('9')).to.have.attribute('data-active');
+        expect(getByTestId('9')).to.have.attribute('data-highlighted');
         expect(getByTestId('9')).to.have.attribute('tabindex', '0');
       });
 
@@ -397,46 +397,46 @@ describe('Composite', () => {
         );
 
         act(() => getByTestId('1').focus());
-        expect(getByTestId('1')).to.have.attribute('data-active');
+        expect(getByTestId('1')).to.have.attribute('data-highlighted');
 
         fireEvent.keyDown(getByTestId('1'), { key: 'ArrowDown' });
         await flushMicrotasks();
-        expect(getByTestId('4')).to.have.attribute('data-active');
+        expect(getByTestId('4')).to.have.attribute('data-highlighted');
         expect(getByTestId('4')).to.have.attribute('tabindex', '0');
         expect(getByTestId('4')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('4'), { key: 'ArrowLeft' });
         await flushMicrotasks();
-        expect(getByTestId('5')).to.have.attribute('data-active');
+        expect(getByTestId('5')).to.have.attribute('data-highlighted');
         expect(getByTestId('5')).to.have.attribute('tabindex', '0');
         expect(getByTestId('5')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('5'), { key: 'ArrowDown' });
         await flushMicrotasks();
-        expect(getByTestId('8')).to.have.attribute('data-active');
+        expect(getByTestId('8')).to.have.attribute('data-highlighted');
         expect(getByTestId('8')).to.have.attribute('tabindex', '0');
         expect(getByTestId('8')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('8'), { key: 'ArrowRight' });
         await flushMicrotasks();
-        expect(getByTestId('7')).to.have.attribute('data-active');
+        expect(getByTestId('7')).to.have.attribute('data-highlighted');
         expect(getByTestId('7')).to.have.attribute('tabindex', '0');
         expect(getByTestId('7')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('7'), { key: 'ArrowUp' });
         await flushMicrotasks();
-        expect(getByTestId('4')).to.have.attribute('data-active');
+        expect(getByTestId('4')).to.have.attribute('data-highlighted');
         expect(getByTestId('4')).to.have.attribute('tabindex', '0');
         expect(getByTestId('4')).toHaveFocus();
 
         fireEvent.keyDown(getByTestId('4'), { key: 'End' });
         await flushMicrotasks();
-        expect(getByTestId('9')).to.have.attribute('data-active');
+        expect(getByTestId('9')).to.have.attribute('data-highlighted');
         expect(getByTestId('9')).to.have.attribute('tabindex', '0');
 
         fireEvent.keyDown(getByTestId('9'), { key: 'Home' });
         await flushMicrotasks();
-        expect(getByTestId('1')).to.have.attribute('data-active');
+        expect(getByTestId('1')).to.have.attribute('data-highlighted');
         expect(getByTestId('1')).to.have.attribute('tabindex', '0');
       });
     });
diff --git a/packages/react/src/ToggleButton/Root/ToggleButtonRoot.test.tsx b/packages/react/src/ToggleButton/Root/ToggleButtonRoot.test.tsx
new file mode 100644
index 0000000000..4e0446bdd5
--- /dev/null
+++ b/packages/react/src/ToggleButton/Root/ToggleButtonRoot.test.tsx
@@ -0,0 +1,101 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { act } from '@mui/internal-test-utils';
+import { ToggleButton } from '@base-ui-components/react/ToggleButton';
+import { createRenderer, describeConformance } from '#test-utils';
+
+describe('<ToggleButton />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<ToggleButton />, () => ({
+    refInstanceof: window.HTMLButtonElement,
+    render,
+  }));
+
+  describe('pressed state', () => {
+    it('controlled', async () => {
+      function App() {
+        const [pressed, setPressed] = React.useState(false);
+        return (
+          <div>
+            <input type="checkbox" checked={pressed} onChange={() => setPressed(!pressed)} />
+            <ToggleButton pressed={pressed} />;
+          </div>
+        );
+      }
+
+      const { getByRole } = await render(<App />);
+      const checkbox = getByRole('checkbox');
+      const button = getByRole('button');
+
+      expect(button).to.have.attribute('aria-pressed', 'false');
+      await act(async () => {
+        checkbox.click();
+      });
+
+      expect(button).to.have.attribute('aria-pressed', 'true');
+
+      await act(async () => {
+        checkbox.click();
+      });
+
+      expect(button).to.have.attribute('aria-pressed', 'false');
+    });
+
+    it('uncontrolled', async () => {
+      const { getByRole } = await render(<ToggleButton defaultPressed={false} />);
+
+      const button = getByRole('button');
+
+      expect(button).to.have.attribute('aria-pressed', 'false');
+      await act(async () => {
+        button.click();
+      });
+
+      expect(button).to.have.attribute('aria-pressed', 'true');
+
+      await act(async () => {
+        button.click();
+      });
+
+      expect(button).to.have.attribute('aria-pressed', 'false');
+    });
+  });
+
+  describe('prop: onPressedChange', () => {
+    it('is called when the pressed state changes', async () => {
+      const handlePressed = spy();
+      const { getByRole } = await render(
+        <ToggleButton defaultPressed={false} onPressedChange={handlePressed} />,
+      );
+
+      const button = getByRole('button');
+
+      await act(async () => {
+        button.click();
+      });
+
+      expect(handlePressed.callCount).to.equal(1);
+      expect(handlePressed.firstCall.args[0]).to.equal(true);
+    });
+  });
+
+  describe('prop: disabled', () => {
+    it('disables the component', async () => {
+      const handlePressed = spy();
+      const { getByRole } = await render(<ToggleButton disabled onPressedChange={handlePressed} />);
+
+      const button = getByRole('button');
+      expect(button).to.have.attribute('disabled');
+      expect(button).to.have.attribute('aria-pressed', 'false');
+
+      await act(async () => {
+        button.click();
+      });
+
+      expect(handlePressed.callCount).to.equal(0);
+      expect(button).to.have.attribute('aria-pressed', 'false');
+    });
+  });
+});
diff --git a/packages/react/src/ToggleButton/Root/ToggleButtonRoot.tsx b/packages/react/src/ToggleButton/Root/ToggleButtonRoot.tsx
new file mode 100644
index 0000000000..2af4a04ec9
--- /dev/null
+++ b/packages/react/src/ToggleButton/Root/ToggleButtonRoot.tsx
@@ -0,0 +1,150 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { useToggleButtonRoot } from './useToggleButtonRoot';
+
+const customStyleHookMapping = {
+  disabled: () => null,
+};
+
+/**
+ *
+ * Demos:
+ *
+ * - [ToggleButton](https://base-ui.com/components/react-toggle-button/)
+ *
+ * API:
+ *
+ * - [ToggleButtonRoot API](https://base-ui.com/components/react-toggle-button/#api-reference-ToggleButtonRoot)
+ */
+const ToggleButtonRoot = React.forwardRef(function ToggleButtonRoot(
+  props: ToggleButtonRoot.Props,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    pressed: pressedProp,
+    defaultPressed: defaultPressedProp,
+    disabled: disabledProp,
+    onPressedChange,
+    className,
+    render,
+    type,
+    form,
+    ...otherProps
+  } = props;
+
+  const { disabled, pressed, getRootProps } = useToggleButtonRoot({
+    pressed: pressedProp,
+    defaultPressed: defaultPressedProp,
+    disabled: disabledProp,
+    onPressedChange,
+    buttonRef: forwardedRef,
+  });
+
+  const ownerState: ToggleButtonRoot.OwnerState = React.useMemo(
+    () => ({
+      disabled,
+      pressed,
+    }),
+    [disabled, pressed],
+  );
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getRootProps,
+    render: render ?? 'button',
+    ref: forwardedRef,
+    ownerState,
+    className,
+    customStyleHookMapping,
+    extraProps: otherProps,
+  });
+
+  return renderElement();
+});
+
+export { ToggleButtonRoot };
+
+export namespace ToggleButtonRoot {
+  export interface OwnerState {
+    pressed: boolean;
+    disabled: boolean;
+  }
+
+  export interface Props
+    extends Pick<
+        useToggleButtonRoot.Parameters,
+        'pressed' | 'defaultPressed' | 'disabled' | 'onPressedChange'
+      >,
+      BaseUIComponentProps<'button', OwnerState> {
+    /**
+     * The label for the ToggleButton.
+     */
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    /**
+     * An id or space-separated list of ids of elements that label the ToggleButton.
+     */
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+  }
+}
+
+ToggleButtonRoot.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The label for the ToggleButton.
+   */
+  'aria-label': PropTypes.string,
+  /**
+   * An id or space-separated list of ids of elements that label the ToggleButton.
+   */
+  'aria-labelledby': PropTypes.string,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The default pressed state. Use when the component is not controlled.
+   *
+   * @default false
+   */
+  defaultPressed: PropTypes.bool,
+  /**
+   * If `true`, the component is disabled.
+   *
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  form: PropTypes.string,
+  /**
+   * Callback fired when the pressed state is changed.
+   *
+   * @param {boolean} pressed The new pressed state.
+   * @param {Event} event The event source of the callback.
+   */
+  onPressedChange: PropTypes.func,
+  /**
+   * If `true`, the component is pressed.
+   *
+   * @default undefined
+   */
+  pressed: PropTypes.bool,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.oneOf(['button', 'reset', 'submit']),
+} as any;
diff --git a/packages/react/src/ToggleButton/Root/useToggleButtonRoot.ts b/packages/react/src/ToggleButton/Root/useToggleButtonRoot.ts
new file mode 100644
index 0000000000..e944cd0902
--- /dev/null
+++ b/packages/react/src/ToggleButton/Root/useToggleButtonRoot.ts
@@ -0,0 +1,112 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { NOOP } from '../../utils/noop';
+import { GenericHTMLProps } from '../../utils/types';
+import { useControlled } from '../../utils/useControlled';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { useButton } from '../../useButton/useButton';
+
+export function useToggleButtonRoot(
+  parameters: useToggleButtonRoot.Parameters,
+): useToggleButtonRoot.ReturnValue {
+  const {
+    pressed: pressedProp,
+    onPressedChange: onPressedChangeProp = NOOP,
+    defaultPressed = false,
+    disabled = false,
+    buttonRef: externalRef,
+  } = parameters;
+
+  const [pressed, setPressedState] = useControlled({
+    controlled: pressedProp,
+    default: defaultPressed,
+    name: 'ToggleButton',
+    state: 'pressed',
+  });
+
+  const onPressedChange = useEventCallback(onPressedChangeProp);
+
+  const { getButtonProps, buttonRef } = useButton({
+    disabled,
+    buttonRef: externalRef,
+    type: 'button',
+  });
+
+  const getRootProps = React.useCallback(
+    (externalProps?: GenericHTMLProps): GenericHTMLProps => {
+      return mergeReactProps(
+        externalProps,
+        {
+          'aria-pressed': pressed,
+          onClick(event: React.MouseEvent) {
+            const nextPressed = !pressed;
+            setPressedState(nextPressed);
+            onPressedChange?.(nextPressed, event.nativeEvent);
+          },
+          ref: buttonRef,
+        },
+        getButtonProps(),
+      );
+    },
+    [getButtonProps, buttonRef, onPressedChange, pressed, setPressedState],
+  );
+
+  return React.useMemo(
+    () => ({
+      getRootProps,
+      disabled,
+      pressed,
+    }),
+    [getRootProps, disabled, pressed],
+  );
+}
+
+export namespace useToggleButtonRoot {
+  export interface Parameters {
+    buttonRef?: React.Ref<HTMLElement>;
+    /**
+     * If `true`, the component is pressed.
+     *
+     * @default undefined
+     */
+    pressed?: boolean;
+    /**
+     * The default pressed state. Use when the component is not controlled.
+     *
+     * @default false
+     */
+    defaultPressed?: boolean;
+    /**
+     * If `true`, the component is disabled.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback fired when the pressed state is changed.
+     *
+     * @param {boolean} pressed The new pressed state.
+     * @param {Event} event The event source of the callback.
+     */
+    onPressedChange?: (pressed: boolean, event: Event) => void;
+    // TODO: a prop to indicate `aria-pressed='mixed'` is supported
+  }
+
+  export interface ReturnValue {
+    /**
+     * Resolver for the root slot's props.
+     * @param externalProps props for the root slot
+     * @returns props that should be spread on the root slot
+     */
+    getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
+    /**
+     * If `true`, the ToggleButton is disabled.
+     */
+    disabled: boolean;
+    /**
+     * If `true`, the ToggleButton is pressed.
+     */
+    pressed: boolean;
+  }
+}
diff --git a/packages/react/src/ToggleButton/index.parts.ts b/packages/react/src/ToggleButton/index.parts.ts
new file mode 100644
index 0000000000..9ede29f130
--- /dev/null
+++ b/packages/react/src/ToggleButton/index.parts.ts
@@ -0,0 +1 @@
+export { ToggleButtonRoot as Root } from './Root/ToggleButtonRoot';
diff --git a/packages/react/src/ToggleButton/index.ts b/packages/react/src/ToggleButton/index.ts
new file mode 100644
index 0000000000..af39dd65af
--- /dev/null
+++ b/packages/react/src/ToggleButton/index.ts
@@ -0,0 +1 @@
+export { Root as ToggleButton } from './index.parts';
diff --git a/packages/react/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.test.tsx b/packages/react/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.test.tsx
new file mode 100644
index 0000000000..0ce61b5d67
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.test.tsx
@@ -0,0 +1,95 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { act } from '@mui/internal-test-utils';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import { createRenderer, describeConformance } from '#test-utils';
+import { NOOP } from '../../utils/noop';
+import { CompositeRoot } from '../../Composite/Root/CompositeRoot';
+import { ToggleButtonGroupRootContext } from '../Root/ToggleButtonGroupRootContext';
+
+const contextValue: ToggleButtonGroupRootContext = {
+  value: [],
+  setGroupValue: NOOP,
+  disabled: false,
+};
+
+describe('<ToggleButtonGroup.Item />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<ToggleButtonGroup.Item value="bookmark" />, () => ({
+    refInstanceof: window.HTMLButtonElement,
+    render: (node) =>
+      render(
+        <ToggleButtonGroupRootContext.Provider value={contextValue}>
+          <CompositeRoot>{node}</CompositeRoot>
+        </ToggleButtonGroupRootContext.Provider>,
+      ),
+  }));
+
+  describe('prop: onPressedChange', () => {
+    it('fires when an Item is clicked', async () => {
+      const onPressedChange = spy();
+
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root>
+          <ToggleButtonGroup.Item value="one" onPressedChange={onPressedChange} />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1] = getAllByRole('button');
+
+      expect(onPressedChange.callCount).to.equal(0);
+
+      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+
+      expect(onPressedChange.callCount).to.equal(1);
+      expect(onPressedChange.args[0][0]).to.equal(true);
+
+      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+
+      expect(onPressedChange.callCount).to.equal(2);
+      expect(onPressedChange.args[1][0]).to.equal(false);
+    });
+
+    describe('keypresses', () => {
+      ['Enter', 'Space'].forEach((key) => {
+        it(`fires when when the ${key} is pressed`, async function test(t = {}) {
+          if (/jsdom/.test(window.navigator.userAgent)) {
+            // @ts-expect-error to support mocha and vitest
+            // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+            this?.skip?.() || t?.skip();
+          }
+
+          const onPressedChange = spy();
+
+          const { getAllByRole, user } = await render(
+            <ToggleButtonGroup.Root>
+              <ToggleButtonGroup.Item value="one" onPressedChange={onPressedChange} />
+              <ToggleButtonGroup.Item value="two" />
+            </ToggleButtonGroup.Root>,
+          );
+
+          const [button1] = getAllByRole('button');
+
+          expect(onPressedChange.callCount).to.equal(0);
+
+          await act(async () => {
+            button1.focus();
+          });
+
+          await user.keyboard(`[${key}]`);
+
+          expect(onPressedChange.callCount).to.equal(1);
+          expect(onPressedChange.args[0][0]).to.equal(true);
+
+          await user.keyboard(`[${key}]`);
+
+          expect(onPressedChange.callCount).to.equal(2);
+          expect(onPressedChange.args[1][0]).to.equal(false);
+        });
+      });
+    });
+  });
+});
diff --git a/packages/react/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.tsx b/packages/react/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.tsx
new file mode 100644
index 0000000000..0ee5f34db1
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/Item/ToggleButtonGroupItem.tsx
@@ -0,0 +1,145 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { CompositeItem } from '../../Composite/Item/CompositeItem';
+import { useToggleButtonGroupRootContext } from '../Root/ToggleButtonGroupRootContext';
+import { useToggleButtonGroupItem } from './useToggleButtonGroupItem';
+
+const customStyleHookMapping = {
+  disabled: () => null,
+};
+/**
+ *
+ * Demos:
+ *
+ * - [ToggleButtonGroup](https://base-ui.com/components/react-toggle-button-group/)
+ *
+ * API:
+ *
+ * - [ToggleButtonGroupItem API](https://base-ui.com/components/react-toggle-button-group/#api-reference-ToggleButtonGroupItem)
+ */
+const ToggleButtonGroupItem = React.forwardRef(function ToggleButtonGroupItem(
+  props: ToggleButtonGroupItem.Props,
+  forwardedRef: React.ForwardedRef<HTMLButtonElement>,
+) {
+  const {
+    value,
+    disabled: disabledProp,
+    onPressedChange,
+    className,
+    render,
+    type, // cannot change button type
+    form, // never participates in form validation
+    ...otherProps
+  } = props;
+
+  const {
+    value: groupValue,
+    setGroupValue,
+    disabled: groupDisabled,
+  } = useToggleButtonGroupRootContext();
+
+  const { disabled, pressed, getRootProps } = useToggleButtonGroupItem({
+    value,
+    groupValue,
+    setGroupValue,
+    disabled: groupDisabled || disabledProp,
+    onPressedChange,
+    itemRef: forwardedRef,
+  });
+
+  const ownerState: ToggleButtonGroupItem.OwnerState = React.useMemo(
+    () => ({
+      disabled,
+      pressed,
+    }),
+    [disabled, pressed],
+  );
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getRootProps,
+    render: render ?? 'button',
+    ref: forwardedRef,
+    ownerState,
+    className,
+    customStyleHookMapping,
+    extraProps: otherProps,
+  });
+
+  return <CompositeItem render={renderElement()} />;
+});
+
+export { ToggleButtonGroupItem };
+
+export namespace ToggleButtonGroupItem {
+  export interface OwnerState {
+    pressed: boolean;
+    disabled: boolean;
+  }
+
+  export interface Props
+    extends Pick<useToggleButtonGroupItem.Parameters, 'value' | 'onPressedChange'>,
+      Omit<BaseUIComponentProps<'button', OwnerState>, 'value'> {
+    /**
+     * The label for the toggle button.
+     */
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    /**
+     * An id or space-separated list of ids of elements that label the toggle button.
+     */
+    'aria-labelledby'?: React.AriaAttributes['aria-labelledby'];
+  }
+}
+
+ToggleButtonGroupItem.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * The label for the toggle button.
+   */
+  'aria-label': PropTypes.string,
+  /**
+   * An id or space-separated list of ids of elements that label the toggle button.
+   */
+  'aria-labelledby': PropTypes.string,
+  /**
+   * @ignore
+   */
+  children: PropTypes.node,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * @ignore
+   */
+  disabled: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  form: PropTypes.string,
+  /**
+   * Callback fired when the pressed state is changed.
+   *
+   * @param {boolean} pressed The new pressed state.
+   * @param {Event} event The event source of the callback.
+   */
+  onPressedChange: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * @ignore
+   */
+  type: PropTypes.oneOf(['button', 'reset', 'submit']),
+  /**
+   * A unique string that identifies the component when used
+   * inside a ToggleButtonGroup
+   */
+  value: PropTypes.string.isRequired,
+} as any;
diff --git a/packages/react/src/ToggleButtonGroup/Item/useToggleButtonGroupItem.ts b/packages/react/src/ToggleButtonGroup/Item/useToggleButtonGroupItem.ts
new file mode 100644
index 0000000000..8b15a9ef55
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/Item/useToggleButtonGroupItem.ts
@@ -0,0 +1,76 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { GenericHTMLProps } from '../../utils/types';
+import { useEventCallback } from '../../utils/useEventCallback';
+import { useToggleButtonRoot } from '../../ToggleButton/Root/useToggleButtonRoot';
+
+export function useToggleButtonGroupItem(
+  parameters: useToggleButtonGroupItem.Parameters,
+): useToggleButtonGroupItem.ReturnValue {
+  const {
+    value,
+    groupValue,
+    setGroupValue,
+    disabled: disabledParam,
+    onPressedChange,
+    itemRef: externalRef,
+  } = parameters;
+
+  const isPressed = groupValue?.indexOf(value) > -1;
+
+  const handlePressedChange = useEventCallback((nextPressed: boolean, event: Event) => {
+    setGroupValue(value, nextPressed, event);
+    onPressedChange?.(nextPressed, event);
+  });
+
+  const {
+    pressed,
+    disabled,
+    getRootProps: getToggleButtonProps,
+  } = useToggleButtonRoot({
+    pressed: isPressed,
+    disabled: disabledParam,
+    onPressedChange: handlePressedChange,
+    buttonRef: externalRef,
+  });
+
+  const getRootProps = React.useCallback(
+    (externalProps?: GenericHTMLProps): GenericHTMLProps => {
+      return mergeReactProps(externalProps, {}, getToggleButtonProps());
+    },
+    [getToggleButtonProps],
+  );
+
+  return React.useMemo(
+    () => ({
+      getRootProps,
+      disabled,
+      pressed,
+    }),
+    [getRootProps, disabled, pressed],
+  );
+}
+
+export namespace useToggleButtonGroupItem {
+  export interface Parameters
+    extends Pick<useToggleButtonRoot.Parameters, 'disabled' | 'onPressedChange'> {
+    itemRef?: React.Ref<HTMLElement>;
+    /**
+     * A unique string that identifies the component when used
+     * inside a ToggleButtonGroup
+     */
+    value: string;
+    /**
+     * The value of the ToggleButtonGroup represented by an array of values
+     * of the items that are pressed
+     */
+    groupValue: readonly string[];
+    /**
+     *
+     */
+    setGroupValue: (newValue: string, nextPressed: boolean, event: Event) => void;
+  }
+
+  export interface ReturnValue extends useToggleButtonRoot.ReturnValue {}
+}
diff --git a/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.test.tsx b/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.test.tsx
new file mode 100644
index 0000000000..f9068bcf61
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.test.tsx
@@ -0,0 +1,380 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { spy } from 'sinon';
+import { act, describeSkipIf, flushMicrotasks } from '@mui/internal-test-utils';
+import { ToggleButtonGroup } from '@base-ui-components/react/ToggleButtonGroup';
+import { createRenderer, describeConformance } from '#test-utils';
+
+const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+describe('<ToggleButtonGroup.Root />', () => {
+  const { render } = createRenderer();
+
+  describeConformance(<ToggleButtonGroup.Root />, () => ({
+    refInstanceof: window.HTMLDivElement,
+    render,
+  }));
+
+  it('renders a `group`', async () => {
+    const { queryByRole } = await render(<ToggleButtonGroup.Root aria-label="My Toggle Group" />);
+
+    expect(queryByRole('group', { name: 'My Toggle Group' })).not.to.equal(null);
+  });
+
+  describe('uncontrolled', () => {
+    it('pressed state', async function test(t = {}) {
+      if (isJSDOM) {
+        // @ts-expect-error to support mocha and vitest
+        // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+        this?.skip?.() || t?.skip();
+      }
+
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button1).to.have.attribute('aria-pressed', 'false');
+      expect(button2).to.have.attribute('aria-pressed', 'false');
+
+      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+
+      expect(button1).to.have.attribute('aria-pressed', 'true');
+      expect(button1).to.have.attribute('data-pressed');
+      expect(button2).to.have.attribute('aria-pressed', 'false');
+
+      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+
+      expect(button2).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('data-pressed');
+      expect(button1).to.have.attribute('aria-pressed', 'false');
+    });
+
+    it('prop: defaultValue', async () => {
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root defaultValue={['two']}>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button2).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('data-pressed');
+      expect(button1).to.have.attribute('aria-pressed', 'false');
+
+      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+
+      expect(button1).to.have.attribute('aria-pressed', 'true');
+      expect(button1).to.have.attribute('data-pressed');
+      expect(button2).to.have.attribute('aria-pressed', 'false');
+    });
+  });
+
+  describe('controlled', () => {
+    it('pressed state', async () => {
+      const { getAllByRole, setProps } = await render(
+        <ToggleButtonGroup.Root value={['two']}>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button1).to.have.attribute('aria-pressed', 'false');
+      expect(button2).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('data-pressed');
+
+      setProps({ value: ['one'] });
+      await flushMicrotasks();
+
+      expect(button1).to.have.attribute('aria-pressed', 'true');
+      expect(button1).to.have.attribute('data-pressed');
+      expect(button2).to.have.attribute('aria-pressed', 'false');
+
+      setProps({ value: ['two'] });
+      await flushMicrotasks();
+
+      expect(button2).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('data-pressed');
+      expect(button1).to.have.attribute('aria-pressed', 'false');
+    });
+
+    it('prop: value', async () => {
+      const { getAllByRole, setProps } = await render(
+        <ToggleButtonGroup.Root value={['two']}>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button2).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('data-pressed');
+      expect(button1).to.have.attribute('aria-pressed', 'false');
+
+      setProps({ value: ['one'] });
+      await flushMicrotasks();
+
+      expect(button1).to.have.attribute('aria-pressed', 'true');
+      expect(button1).to.have.attribute('data-pressed');
+      expect(button2).to.have.attribute('aria-pressed', 'false');
+    });
+  });
+
+  describe('prop: disabled', () => {
+    it('can disable the whole group', async () => {
+      const { getAllByRole } = await render(
+        <ToggleButtonGroup.Root disabled>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button1).to.have.attribute('disabled');
+      expect(button2).to.have.attribute('disabled');
+    });
+
+    it('can disable individual items', async () => {
+      const { getAllByRole } = await render(
+        <ToggleButtonGroup.Root>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" disabled />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button1).to.not.have.attribute('disabled');
+      expect(button2).to.have.attribute('disabled');
+    });
+  });
+
+  describe('prop: toggleMultiple', () => {
+    it('multiple items can be pressed when true', async () => {
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root toggleMultiple defaultValue={['one']}>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button1).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('aria-pressed', 'false');
+
+      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+
+      expect(button1).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('aria-pressed', 'true');
+    });
+
+    it('only one item can be pressed when false', async () => {
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root toggleMultiple={false} defaultValue={['one']}>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(button1).to.have.attribute('aria-pressed', 'true');
+      expect(button2).to.have.attribute('aria-pressed', 'false');
+
+      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+
+      expect(button1).to.have.attribute('aria-pressed', 'false');
+      expect(button2).to.have.attribute('aria-pressed', 'true');
+    });
+  });
+
+  describeSkipIf(isJSDOM)('keyboard interactions', () => {
+    it('ltr', async () => {
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      await user.keyboard('[Tab]');
+
+      expect(button1).to.have.attribute('data-highlighted');
+      expect(button1).to.have.attribute('tabindex', '0');
+      expect(button1).toHaveFocus();
+
+      await user.keyboard('[ArrowRight]');
+
+      expect(button2).to.have.attribute('data-highlighted');
+      expect(button2).to.have.attribute('tabindex', '0');
+      expect(button2).toHaveFocus();
+
+      await user.keyboard('[ArrowRight]');
+
+      expect(button1).to.have.attribute('data-highlighted');
+      expect(button1).to.have.attribute('tabindex', '0');
+      expect(button1).toHaveFocus();
+
+      await user.keyboard('[ArrowDown]');
+
+      expect(button2).to.have.attribute('data-highlighted');
+      expect(button2).to.have.attribute('tabindex', '0');
+      expect(button2).toHaveFocus();
+
+      await user.keyboard('[ArrowDown]');
+
+      expect(button1).to.have.attribute('data-highlighted');
+      expect(button1).to.have.attribute('tabindex', '0');
+      expect(button1).toHaveFocus();
+    });
+
+    it('rtl', async () => {
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root direction="rtl">
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      await user.keyboard('[Tab]');
+
+      expect(button1).to.have.attribute('data-highlighted');
+      expect(button1).to.have.attribute('tabindex', '0');
+      expect(button1).toHaveFocus();
+
+      await user.keyboard('[ArrowLeft]');
+
+      expect(button2).to.have.attribute('data-highlighted');
+      expect(button2).to.have.attribute('tabindex', '0');
+      expect(button2).toHaveFocus();
+
+      await user.keyboard('[ArrowLeft]');
+
+      expect(button1).to.have.attribute('data-highlighted');
+      expect(button1).to.have.attribute('tabindex', '0');
+      expect(button1).toHaveFocus();
+
+      await user.keyboard('[ArrowDown]');
+
+      expect(button2).to.have.attribute('data-highlighted');
+      expect(button2).to.have.attribute('tabindex', '0');
+      expect(button2).toHaveFocus();
+
+      await user.keyboard('[ArrowDown]');
+
+      expect(button1).to.have.attribute('data-highlighted');
+      expect(button1).to.have.attribute('tabindex', '0');
+      expect(button1).toHaveFocus();
+    });
+
+    ['Enter', 'Space'].forEach((key) => {
+      it(`key: ${key} toggles the pressed state`, async () => {
+        const { getAllByRole, user } = await render(
+          <ToggleButtonGroup.Root>
+            <ToggleButtonGroup.Item value="one" />
+            <ToggleButtonGroup.Item value="two" />
+          </ToggleButtonGroup.Root>,
+        );
+
+        const [button1] = getAllByRole('button');
+
+        expect(button1).to.have.attribute('aria-pressed', 'false');
+
+        await act(async () => {
+          button1.focus();
+        });
+
+        await user.keyboard(`[${key}]`);
+
+        expect(button1).to.have.attribute('aria-pressed', 'true');
+
+        await user.keyboard(`[${key}]`);
+
+        expect(button1).to.have.attribute('aria-pressed', 'false');
+      });
+    });
+  });
+
+  describe('prop: onValueChange', () => {
+    it('fires when an Item is clicked', async () => {
+      const onValueChange = spy();
+
+      const { getAllByRole, user } = await render(
+        <ToggleButtonGroup.Root onValueChange={onValueChange}>
+          <ToggleButtonGroup.Item value="one" />
+          <ToggleButtonGroup.Item value="two" />
+        </ToggleButtonGroup.Root>,
+      );
+
+      const [button1, button2] = getAllByRole('button');
+
+      expect(onValueChange.callCount).to.equal(0);
+
+      await user.pointer({ keys: '[MouseLeft]', target: button1 });
+
+      expect(onValueChange.callCount).to.equal(1);
+      expect(onValueChange.args[0][0]).to.deep.equal(['one']);
+
+      await user.pointer({ keys: '[MouseLeft]', target: button2 });
+
+      expect(onValueChange.callCount).to.equal(2);
+      expect(onValueChange.args[1][0]).to.deep.equal(['two']);
+    });
+
+    ['Enter', 'Space'].forEach((key) => {
+      it(`fires when when the ${key} is pressed`, async function test(t = {}) {
+        if (isJSDOM) {
+          // @ts-expect-error to support mocha and vitest
+          // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+          this?.skip?.() || t?.skip();
+        }
+
+        const onValueChange = spy();
+
+        const { getAllByRole, user } = await render(
+          <ToggleButtonGroup.Root onValueChange={onValueChange}>
+            <ToggleButtonGroup.Item value="one" />
+            <ToggleButtonGroup.Item value="two" />
+          </ToggleButtonGroup.Root>,
+        );
+
+        const [button1, button2] = getAllByRole('button');
+
+        expect(onValueChange.callCount).to.equal(0);
+
+        await act(async () => {
+          button1.focus();
+        });
+
+        await user.keyboard(`[${key}]`);
+
+        expect(onValueChange.callCount).to.equal(1);
+        expect(onValueChange.args[0][0]).to.deep.equal(['one']);
+
+        await act(async () => {
+          button2.focus();
+        });
+
+        await user.keyboard(`[${key}]`);
+
+        expect(onValueChange.callCount).to.equal(2);
+        expect(onValueChange.args[1][0]).to.deep.equal(['two']);
+      });
+    });
+  });
+});
diff --git a/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.tsx b/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.tsx
new file mode 100644
index 0000000000..afe136ac11
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRoot.tsx
@@ -0,0 +1,168 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useComponentRenderer } from '../../utils/useComponentRenderer';
+import type { BaseUIComponentProps } from '../../utils/types';
+import { CompositeRoot } from '../../Composite/Root/CompositeRoot';
+import {
+  useToggleButtonGroupRoot,
+  type UseToggleButtonGroupRoot,
+} from './useToggleButtonGroupRoot';
+import { ToggleButtonGroupRootContext } from './ToggleButtonGroupRootContext';
+
+const customStyleHookMapping = {
+  multiple(value: boolean) {
+    if (value) {
+      return { 'data-multiple': '' } as Record<string, string>;
+    }
+    return null;
+  },
+};
+/**
+ *
+ * Demos:
+ *
+ * - [ToggleButtonGroup](https://base-ui.com/components/react-toggle-button-group/)
+ *
+ * API:
+ *
+ * - [ToggleButtonGroupRoot API](https://base-ui.com/components/react-toggle-button-group/#api-reference-ToggleButtonGroupRoot)
+ */
+const ToggleButtonGroupRoot = React.forwardRef(function ToggleButtonGroupRoot(
+  props: ToggleButtonGroupRoot.Props,
+  forwardedRef: React.ForwardedRef<HTMLDivElement>,
+) {
+  const {
+    value: valueProp,
+    defaultValue: defaultValueProp,
+    direction,
+    disabled: disabledProp,
+    toggleMultiple = false,
+    onValueChange,
+    className,
+    render,
+    ...otherProps
+  } = props;
+
+  const defaultValue = React.useMemo(() => {
+    if (valueProp === undefined) {
+      return defaultValueProp ?? [];
+    }
+
+    return undefined;
+  }, [valueProp, defaultValueProp]);
+
+  const { getRootProps, disabled, setGroupValue, value } = useToggleButtonGroupRoot({
+    value: valueProp,
+    defaultValue,
+    direction,
+    disabled: disabledProp,
+    toggleMultiple,
+    onValueChange,
+  });
+
+  const ownerState: ToggleButtonGroupRoot.OwnerState = React.useMemo(
+    () => ({ disabled, multiple: toggleMultiple }),
+    [disabled, toggleMultiple],
+  );
+
+  const contextValue: ToggleButtonGroupRootContext = React.useMemo(
+    () => ({
+      disabled,
+      setGroupValue,
+      value,
+    }),
+    [disabled, value, setGroupValue],
+  );
+
+  const { renderElement } = useComponentRenderer({
+    propGetter: getRootProps,
+    render: render ?? 'div',
+    ref: forwardedRef,
+    ownerState,
+    className,
+    customStyleHookMapping,
+    extraProps: otherProps,
+  });
+
+  return (
+    <ToggleButtonGroupRootContext.Provider value={contextValue}>
+      <CompositeRoot render={renderElement()} />
+    </ToggleButtonGroupRootContext.Provider>
+  );
+});
+
+export { ToggleButtonGroupRoot };
+
+export namespace ToggleButtonGroupRoot {
+  export interface OwnerState {
+    disabled: boolean;
+    multiple: boolean;
+  }
+
+  export interface Props
+    extends Pick<
+        UseToggleButtonGroupRoot.Parameters,
+        'value' | 'defaultValue' | 'onValueChange' | 'disabled' | 'toggleMultiple' | 'direction'
+      >,
+      Omit<BaseUIComponentProps<'div', OwnerState>, 'defaultValue'> {
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+  }
+}
+
+ToggleButtonGroupRoot.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,
+  /**
+   * Class names applied to the element or a function that returns them based on the component's state.
+   */
+  className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+  /**
+   * The open state of the ToggleButtonGroup represented by an array of
+   * the values of all pressed `<ToggleButtonGroup.Item/>`s
+   * This is the uncontrolled counterpart of `value`.
+   */
+  defaultValue: PropTypes.arrayOf(PropTypes.string),
+  /**
+   * Text direction
+   * @default 'ltr'
+   */
+  direction: PropTypes.oneOf(['ltr', 'rtl']),
+  /**
+   * @default false
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Callback fired when the pressed states of the ToggleButtonGroup changes.
+   *
+   * @param {string[]} groupValue An array of the `value`s of all the pressed items.
+   * @param {Event} event The event source of the callback.
+   */
+  onValueChange: PropTypes.func,
+  /**
+   * A function to customize rendering of the component.
+   */
+  render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]),
+  /**
+   * When `false` only one item in the group can be pressed. If any item in
+   * the group becomes pressed, the others will become unpressed.
+   * When `true` multiple items can be pressed.
+   * @default false
+   */
+  toggleMultiple: PropTypes.bool,
+  /**
+   * The open state of the ToggleButtonGroup represented by an array of
+   * the values of all pressed `<ToggleButtonGroup.Item/>`s
+   * This is the controlled counterpart of `defaultValue`.
+   */
+  value: PropTypes.arrayOf(PropTypes.string),
+} as any;
diff --git a/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRootContext.ts b/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRootContext.ts
new file mode 100644
index 0000000000..be10d9f408
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/Root/ToggleButtonGroupRootContext.ts
@@ -0,0 +1,27 @@
+'use client';
+import * as React from 'react';
+
+export interface ToggleButtonGroupRootContext {
+  value: readonly string[];
+  setGroupValue: (newValue: string, nextPressed: boolean, event: Event) => void;
+  disabled: boolean;
+}
+
+export const ToggleButtonGroupRootContext = React.createContext<
+  ToggleButtonGroupRootContext | undefined
+>(undefined);
+
+if (process.env.NODE_ENV !== 'production') {
+  ToggleButtonGroupRootContext.displayName = 'ToggleButtonGroupRootContext';
+}
+
+export function useToggleButtonGroupRootContext() {
+  const context = React.useContext(ToggleButtonGroupRootContext);
+  if (context === undefined) {
+    throw new Error(
+      'Base UI: ToggleButtonGroupRootContext is missing. ToggleButtonGroup parts must be placed within <ToggleButtonGroup.Root>.',
+    );
+  }
+
+  return context;
+}
diff --git a/packages/react/src/ToggleButtonGroup/Root/useToggleButtonGroupRoot.ts b/packages/react/src/ToggleButtonGroup/Root/useToggleButtonGroupRoot.ts
new file mode 100644
index 0000000000..ef3918ec30
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/Root/useToggleButtonGroupRoot.ts
@@ -0,0 +1,124 @@
+'use client';
+import * as React from 'react';
+import { mergeReactProps } from '../../utils/mergeReactProps';
+import { useControlled } from '../../utils/useControlled';
+import { useEventCallback } from '../../utils/useEventCallback';
+import type { GenericHTMLProps } from '../../utils/types';
+
+export function useToggleButtonGroupRoot(
+  parameters: UseToggleButtonGroupRoot.Parameters,
+): UseToggleButtonGroupRoot.ReturnValue {
+  const {
+    value,
+    defaultValue,
+    // direction = 'ltr',
+    disabled = false,
+    onValueChange,
+    toggleMultiple = false,
+  } = parameters;
+
+  const [groupValue, setValueState] = useControlled({
+    controlled: value,
+    default: defaultValue,
+    name: 'ToggleButtonGroup',
+    state: 'value',
+  });
+
+  const setGroupValue = useEventCallback((newValue: string, nextPressed: boolean, event: Event) => {
+    let newGroupValue: string[] | undefined;
+    if (toggleMultiple) {
+      newGroupValue = groupValue.slice();
+      if (nextPressed) {
+        newGroupValue.push(newValue);
+      } else {
+        newGroupValue.splice(groupValue.indexOf(newValue), 1);
+      }
+    } else {
+      newGroupValue = nextPressed ? [newValue] : [];
+    }
+    if (Array.isArray(newGroupValue)) {
+      setValueState(newGroupValue);
+      onValueChange?.(newGroupValue, event);
+    }
+  });
+
+  const getRootProps = React.useCallback(
+    (externalProps = {}) =>
+      mergeReactProps<'div'>(externalProps, {
+        role: 'group',
+        // dir: direction,
+      }),
+    [],
+  );
+
+  return React.useMemo(
+    () => ({
+      getRootProps,
+      disabled,
+      setGroupValue,
+      value: groupValue,
+    }),
+    [getRootProps, disabled, groupValue, setGroupValue],
+  );
+}
+
+export namespace UseToggleButtonGroupRoot {
+  export type Direction = 'ltr' | 'rtl';
+
+  export interface Parameters {
+    /**
+     * The open state of the ToggleButtonGroup represented by an array of
+     * the values of all pressed `<ToggleButtonGroup.Item/>`s
+     * This is the controlled counterpart of `defaultValue`.
+     */
+    value?: readonly string[];
+    /**
+     * The open state of the ToggleButtonGroup represented by an array of
+     * the values of all pressed `<ToggleButtonGroup.Item/>`s
+     * This is the uncontrolled counterpart of `value`.
+     */
+    defaultValue?: readonly string[];
+    /**
+     * Callback fired when the pressed states of the ToggleButtonGroup changes.
+     *
+     * @param {string[]} groupValue An array of the `value`s of all the pressed items.
+     * @param {Event} event The event source of the callback.
+     */
+    onValueChange?: (groupValue: string[], event: Event) => void;
+    /**
+     * When `true` the component is disabled
+     * @false
+     */
+    disabled?: boolean;
+    /**
+     * When `false` only one item in the group can be pressed. If any item in
+     * the group becomes pressed, the others will become unpressed.
+     * When `true` multiple items can be pressed.
+     * @default false
+     */
+    toggleMultiple?: boolean;
+    /**
+     * Text direction
+     * @default 'ltr'
+     */
+    direction?: Direction;
+  }
+
+  export interface ReturnValue {
+    getRootProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
+    /**
+     * When `true` the component is disabled
+     * @false
+     */
+    disabled: boolean;
+    /**
+     *
+     */
+    setGroupValue: (newValue: string, nextPressed: boolean, event: Event) => void;
+    /**
+     * The value of the ToggleButtonGroup represented by an array of values
+     * of the items that are pressed
+     */
+    value: readonly string[];
+  }
+}
diff --git a/packages/react/src/ToggleButtonGroup/index.parts.ts b/packages/react/src/ToggleButtonGroup/index.parts.ts
new file mode 100644
index 0000000000..5c0e559a33
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/index.parts.ts
@@ -0,0 +1,2 @@
+export { ToggleButtonGroupRoot as Root } from './Root/ToggleButtonGroupRoot';
+export { ToggleButtonGroupItem as Item } from './Item/ToggleButtonGroupItem';
diff --git a/packages/react/src/ToggleButtonGroup/index.ts b/packages/react/src/ToggleButtonGroup/index.ts
new file mode 100644
index 0000000000..6466ce449f
--- /dev/null
+++ b/packages/react/src/ToggleButtonGroup/index.ts
@@ -0,0 +1 @@
+export * as ToggleButtonGroup from './index.parts';
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index add2838b36..ac87904c84 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -20,4 +20,6 @@ export * from './Slider';
 export * from './Switch';
 export * from './Tabs';
 export * from './TextInput';
+export * from './ToggleButton';
+export * from './ToggleButtonGroup';
 export * from './Tooltip';