diff --git a/packages/lab/src/index.ts b/packages/lab/src/index.ts
index 3662ed000ad..7694611b482 100644
--- a/packages/lab/src/index.ts
+++ b/packages/lab/src/index.ts
@@ -61,6 +61,7 @@ export * from "./toast-group";
 export * from "./tokenized-input";
 export * from "./tokenized-input-next";
 export * from "./toolbar";
+export * from "./toolbar-next";
 export * from "./tree";
 export * from "./utils";
 export * from "./window";
diff --git a/packages/lab/src/toolbar-next/ToolbarNext.css b/packages/lab/src/toolbar-next/ToolbarNext.css
new file mode 100644
index 00000000000..ad5d31438af
--- /dev/null
+++ b/packages/lab/src/toolbar-next/ToolbarNext.css
@@ -0,0 +1,34 @@
+.saltToolbarNext {
+  box-sizing: border-box;
+  inline-size: 100%;
+  min-width: 0;
+}
+
+.saltToolbarNext-layout {
+  display: grid;
+  align-items: center;
+  column-gap: var(--salt-spacing-100);
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+}
+
+.saltToolbarNext-fallback {
+  display: flex;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+}
+
+.saltToolbarNext-layout > * {
+  min-width: 0;
+}
+
+.saltToolbarNext-bordered {
+  border: var(--salt-size-fixed-100) var(--salt-borderStyle-solid)
+    var(--salt-container-primary-borderColor);
+  border-radius: var(--salt-palette-corner, 0);
+  padding: var(--salt-spacing-100);
+}
+
+.saltToolbarNext-transparent {
+  border: none;
+  padding: 0;
+}
diff --git a/packages/lab/src/toolbar-next/ToolbarNext.tsx b/packages/lab/src/toolbar-next/ToolbarNext.tsx
new file mode 100644
index 00000000000..42f6e2f7b24
--- /dev/null
+++ b/packages/lab/src/toolbar-next/ToolbarNext.tsx
@@ -0,0 +1,151 @@
+import { Divider, makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import {
+  Children,
+  type ComponentPropsWithoutRef,
+  Fragment,
+  forwardRef,
+  isValidElement,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+
+import toolbarNextCss from "./ToolbarNext.css";
+import { ToolbarRegion, type ToolbarRegionPosition } from "./ToolbarRegion";
+import { TooltrayNext, type TooltrayNextProps } from "./Tooltray";
+
+export interface ToolbarNextProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Defaults to `"bordered"`.
+   */
+  variant?: "bordered" | "transparent";
+}
+
+const withBaseName = makePrefixer("saltToolbarNext");
+
+type ToolbarNextChild = Exclude<ReactNode, boolean | null | undefined>;
+
+function flattenToolbarChildren(children: ReactNode): ToolbarNextChild[] {
+  const flattened: ToolbarNextChild[] = [];
+
+  Children.forEach(children, (child) => {
+    if (child == null || typeof child === "boolean") {
+      return;
+    }
+
+    if (isValidElement(child) && child.type === Fragment) {
+      flattened.push(...flattenToolbarChildren(child.props.children));
+      return;
+    }
+
+    flattened.push(child);
+  });
+
+  return flattened;
+}
+
+function isToolbarRegionElement(
+  child: ToolbarNextChild,
+): child is ReactElement<ComponentPropsWithoutRef<typeof ToolbarRegion>> {
+  return isValidElement(child) && child.type === ToolbarRegion;
+}
+
+function isTooltrayElement(
+  child: ToolbarNextChild,
+): child is ReactElement<TooltrayNextProps> {
+  return isValidElement(child) && child.type === TooltrayNext;
+}
+
+function isDividerElement(child: ToolbarNextChild): child is ReactElement {
+  return isValidElement(child) && child.type === Divider;
+}
+
+function getTooltrayAlign(child: ReactElement<TooltrayNextProps>) {
+  return child.props.align ?? "start";
+}
+
+function buildImplicitRegions(children: ToolbarNextChild[]) {
+  const buckets: Record<ToolbarRegionPosition, ToolbarNextChild[]> = {
+    start: [],
+    center: [],
+    end: [],
+  };
+  let currentPosition: ToolbarRegionPosition = "start";
+
+  for (const child of children) {
+    if (isTooltrayElement(child)) {
+      currentPosition = getTooltrayAlign(child);
+      buckets[currentPosition].push(child);
+      continue;
+    }
+
+    if (isDividerElement(child)) {
+      buckets[currentPosition].push(child);
+    }
+  }
+
+  return (Object.keys(buckets) as ToolbarRegionPosition[]).map((position) => {
+    const regionChildren = buckets[position];
+
+    if (regionChildren.length === 0) {
+      return null;
+    }
+
+    return (
+      <ToolbarRegion data-implicit position={position} key={position}>
+        {regionChildren}
+      </ToolbarRegion>
+    );
+  });
+}
+
+export const ToolbarNext = forwardRef<HTMLDivElement, ToolbarNextProps>(
+  function ToolbarNext(
+    { children, className, variant = "bordered", ...rest },
+    ref,
+  ) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toolbar-next",
+      css: toolbarNextCss,
+      window: targetWindow,
+    });
+
+    const flattenedChildren = flattenToolbarChildren(children);
+    const hasRegionChildren = flattenedChildren.some(isToolbarRegionElement);
+    const hasOnlyRegions =
+      hasRegionChildren && flattenedChildren.every(isToolbarRegionElement);
+    const hasOnlyFlatChildren = flattenedChildren.every(
+      (child) => isTooltrayElement(child) || isDividerElement(child),
+    );
+
+    const mode = hasOnlyRegions
+      ? "explicit"
+      : hasOnlyFlatChildren
+        ? "flat"
+        : "invalid";
+
+    return (
+      <div
+        className={clsx(
+          withBaseName(),
+          {
+            [withBaseName("fallback")]: mode === "invalid",
+            [withBaseName("layout")]: mode !== "invalid",
+          },
+          withBaseName(variant),
+          className,
+        )}
+        data-mode={mode}
+        ref={ref}
+        {...rest}
+        role="toolbar"
+        aria-orientation="horizontal"
+      >
+        {mode === "flat" ? buildImplicitRegions(flattenedChildren) : children}
+      </div>
+    );
+  },
+);
diff --git a/packages/lab/src/toolbar-next/ToolbarRegion.css b/packages/lab/src/toolbar-next/ToolbarRegion.css
new file mode 100644
index 00000000000..0648b101d74
--- /dev/null
+++ b/packages/lab/src/toolbar-next/ToolbarRegion.css
@@ -0,0 +1,28 @@
+.saltToolbarRegion {
+  display: flex;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  min-width: 0;
+}
+
+.saltToolbarRegion[data-position="start"] {
+  grid-column: 1;
+  justify-self: stretch;
+}
+
+.saltToolbarRegion[data-position="center"] {
+  grid-column: 2;
+  justify-self: center;
+  max-width: 100%;
+}
+
+.saltToolbarRegion[data-position="end"] {
+  grid-column: 3;
+  justify-content: flex-end;
+  justify-self: stretch;
+}
+
+.saltToolbarRegion[data-implicit] > .saltTooltrayNext[data-align="center"],
+.saltToolbarRegion[data-implicit] > .saltTooltrayNext[data-align="end"] {
+  margin-inline: 0;
+}
diff --git a/packages/lab/src/toolbar-next/ToolbarRegion.tsx b/packages/lab/src/toolbar-next/ToolbarRegion.tsx
new file mode 100644
index 00000000000..d357dbad7e0
--- /dev/null
+++ b/packages/lab/src/toolbar-next/ToolbarRegion.tsx
@@ -0,0 +1,40 @@
+import { makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+import toolbarRegionCss from "./ToolbarRegion.css";
+
+export type ToolbarRegionPosition = "start" | "center" | "end";
+
+export interface ToolbarRegionProps extends ComponentPropsWithoutRef<"div"> {
+  /**
+   * Controls where the region is placed across the full toolbar.
+   */
+  position: ToolbarRegionPosition;
+}
+
+const withBaseName = makePrefixer("saltToolbarRegion");
+
+export const ToolbarRegion = forwardRef<HTMLDivElement, ToolbarRegionProps>(
+  function ToolbarRegion({ children, className, position, ...rest }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-toolbar-region",
+      css: toolbarRegionCss,
+      window: targetWindow,
+    });
+
+    return (
+      <div
+        className={clsx(withBaseName(), className)}
+        data-position={position}
+        ref={ref}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
diff --git a/packages/lab/src/toolbar-next/Tooltray.css b/packages/lab/src/toolbar-next/Tooltray.css
new file mode 100644
index 00000000000..265703b5903
--- /dev/null
+++ b/packages/lab/src/toolbar-next/Tooltray.css
@@ -0,0 +1,14 @@
+.saltTooltrayNext {
+  display: flex;
+  align-items: center;
+  gap: var(--salt-spacing-100);
+  min-width: 0;
+}
+
+.saltTooltrayNext[data-align="end"] {
+  margin-inline-start: auto;
+}
+
+.saltTooltrayNext[data-align="center"] {
+  margin-inline: auto;
+}
diff --git a/packages/lab/src/toolbar-next/Tooltray.tsx b/packages/lab/src/toolbar-next/Tooltray.tsx
new file mode 100644
index 00000000000..22be14e364c
--- /dev/null
+++ b/packages/lab/src/toolbar-next/Tooltray.tsx
@@ -0,0 +1,67 @@
+import { makePrefixer } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import { clsx } from "clsx";
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+
+import tooltrayCss from "./Tooltray.css";
+
+export interface TooltrayNextProps
+  extends Omit<ComponentPropsWithoutRef<"div">, "align"> {
+  /**
+   * `TooltrayNext` is layout-only by default.
+   * Pass `role="group"` with `aria-label` or `aria-labelledby` when the tray
+   * represents a meaningful subgroup inside the toolbar.
+   *
+   * Alignment of the tooltray.
+   * - When a `TooltrayNext` is used directly inside `ToolbarNext`, this acts as
+   *   shorthand for which toolbar band the tray belongs to.
+   * - When a `TooltrayNext` is used inside `ToolbarRegion`, this alignment is
+   *   local to that region.
+   *
+   * Defaults to `"start"`.
+   */
+  align?: "start" | "end" | "center";
+}
+
+const withBaseName = makePrefixer("saltTooltrayNext");
+
+export const TooltrayNext = forwardRef<HTMLDivElement, TooltrayNextProps>(
+  function TooltrayNext(
+    {
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledby,
+      align = "start",
+      children,
+      className,
+      role,
+      ...rest
+    },
+    ref,
+  ) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-tooltray-next",
+      css: tooltrayCss,
+      window: targetWindow,
+    });
+
+    return (
+      <div
+        className={clsx(withBaseName(), className)}
+        data-align={align}
+        ref={ref}
+        role={role}
+        {...(role != null
+          ? {
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledby,
+            }
+          : {})}
+        {...rest}
+      >
+        {children}
+      </div>
+    );
+  },
+);
diff --git a/packages/lab/src/toolbar-next/index.ts b/packages/lab/src/toolbar-next/index.ts
new file mode 100644
index 00000000000..7c74846eb88
--- /dev/null
+++ b/packages/lab/src/toolbar-next/index.ts
@@ -0,0 +1,3 @@
+export * from "./ToolbarNext";
+export * from "./ToolbarRegion";
+export * from "./Tooltray";
diff --git a/packages/lab/stories/toolbar-next/toolbar-next.stories.tsx b/packages/lab/stories/toolbar-next/toolbar-next.stories.tsx
new file mode 100644
index 00000000000..ad72f837d22
--- /dev/null
+++ b/packages/lab/stories/toolbar-next/toolbar-next.stories.tsx
@@ -0,0 +1,250 @@
+import {
+  Button,
+  Divider,
+  Dropdown,
+  Input,
+  Option,
+  Switch,
+  Text,
+  ToggleButton,
+  ToggleButtonGroup,
+} from "@salt-ds/core";
+import { GridIcon, ListIcon, SearchIcon } from "@salt-ds/icons";
+import {
+  DateInputSingle,
+  ToolbarNext,
+  ToolbarRegion,
+  TooltrayNext,
+} from "@salt-ds/lab";
+import type { Meta, StoryFn } from "@storybook/react-vite";
+
+export default {
+  title: "Lab/Toolbar Next",
+  component: ToolbarNext,
+  subcomponents: {
+    ToolbarRegion,
+    TooltrayNext,
+  },
+} as Meta<typeof ToolbarNext>;
+
+const options = ["Option A", "Option B", "Option C"];
+
+export const FlatAlignSugar: StoryFn<typeof ToolbarNext> = () => (
+  <ToolbarNext aria-label="Flat toolbar">
+    <TooltrayNext role="group" aria-label="Search and filter">
+      <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+      <Dropdown bordered defaultSelected={["Option A"]}>
+        {options.map((option) => (
+          <Option value={option} key={option} />
+        ))}
+      </Dropdown>
+    </TooltrayNext>
+    <TooltrayNext role="group" align="end" aria-label="Actions">
+      <Button appearance="transparent" aria-label="Grid view">
+        <GridIcon aria-hidden />
+      </Button>
+      <Button appearance="transparent" aria-label="List view">
+        <ListIcon aria-hidden />
+      </Button>
+      <Button appearance="solid">Button</Button>
+    </TooltrayNext>
+  </ToolbarNext>
+);
+
+export const FlatWithDividers: StoryFn<typeof ToolbarNext> = () => (
+  <ToolbarNext aria-label="Toolbar with dividers">
+    <TooltrayNext role="group" aria-label="Search and filter">
+      <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+      <Dropdown bordered defaultSelected={["Option A"]}>
+        {options.map((option) => (
+          <Option value={option} key={option} />
+        ))}
+      </Dropdown>
+    </TooltrayNext>
+    <Divider orientation="vertical" variant="secondary" />
+    <TooltrayNext>
+      <Text>Description</Text>
+    </TooltrayNext>
+    <TooltrayNext align="end">
+      <Dropdown bordered defaultSelected={["Option A"]}>
+        {options.map((option) => (
+          <Option value={option} key={option} />
+        ))}
+      </Dropdown>
+    </TooltrayNext>
+    <Divider orientation="vertical" variant="secondary" />
+    <TooltrayNext role="group" align="end" aria-label="Actions">
+      <Button appearance="transparent" aria-label="Grid view">
+        <GridIcon aria-hidden />
+      </Button>
+      <Button appearance="transparent" aria-label="List view">
+        <ListIcon aria-hidden />
+      </Button>
+      <Button appearance="solid">Button</Button>
+    </TooltrayNext>
+  </ToolbarNext>
+);
+
+export const Spacing300Groups: StoryFn<typeof ToolbarNext> = () => (
+  <ToolbarNext aria-label="Toolbar with spacing groups">
+    <ToolbarRegion position="start">
+      <TooltrayNext role="group" aria-label="Search and filter">
+        <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+        <Dropdown bordered defaultSelected={["Option A"]}>
+          {options.map((option) => (
+            <Option value={option} key={option} />
+          ))}
+        </Dropdown>
+      </TooltrayNext>
+    </ToolbarRegion>
+    <ToolbarRegion position="end">
+      <TooltrayNext
+        role="group"
+        aria-label="Actions"
+        style={{ gap: "var(--salt-spacing-300)" }}
+      >
+        <Button appearance="transparent" aria-label="Grid view">
+          <GridIcon aria-hidden />
+        </Button>
+        <Button appearance="transparent" aria-label="List view">
+          <ListIcon aria-hidden />
+        </Button>
+        <Button appearance="solid">Button</Button>
+      </TooltrayNext>
+    </ToolbarRegion>
+  </ToolbarNext>
+);
+
+export const RegionFirst: StoryFn<typeof ToolbarNext> = () => (
+  <ToolbarNext aria-label="Region first toolbar">
+    <ToolbarRegion position="start">
+      <TooltrayNext>
+        <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+      </TooltrayNext>
+    </ToolbarRegion>
+    <ToolbarRegion position="center">
+      <TooltrayNext role="group" aria-label="Toggle options">
+        <ToggleButtonGroup>
+          <ToggleButton value="toggle-1">Toggle</ToggleButton>
+          <ToggleButton value="toggle-2">Toggle</ToggleButton>
+          <ToggleButton value="toggle-3">Toggle</ToggleButton>
+        </ToggleButtonGroup>
+      </TooltrayNext>
+    </ToolbarRegion>
+    <ToolbarRegion position="end">
+      <TooltrayNext>
+        <Text>Description</Text>
+      </TooltrayNext>
+    </ToolbarRegion>
+  </ToolbarNext>
+);
+
+export const Transparent: StoryFn<typeof ToolbarNext> = () => (
+  <ToolbarNext variant="transparent" aria-label="App header toolbar">
+    <ToolbarRegion position="start">
+      <TooltrayNext role="group" aria-label="Search and filter">
+        <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+        <Dropdown bordered defaultSelected={["Option A"]}>
+          {options.map((option) => (
+            <Option value={option} key={option} />
+          ))}
+        </Dropdown>
+      </TooltrayNext>
+    </ToolbarRegion>
+    <ToolbarRegion position="end">
+      <TooltrayNext role="group" aria-label="Utility actions">
+        <Button appearance="transparent" aria-label="Grid view">
+          <GridIcon aria-hidden />
+        </Button>
+        <Button appearance="transparent" aria-label="List view">
+          <ListIcon aria-hidden />
+        </Button>
+        <Button appearance="solid">Button</Button>
+      </TooltrayNext>
+    </ToolbarRegion>
+  </ToolbarNext>
+);
+
+export const DataViewActions: StoryFn<typeof ToolbarNext> = () => (
+  <ToolbarNext aria-label="Data view toolbar">
+    <ToolbarRegion position="start">
+      <TooltrayNext role="group" aria-label="Search and filter">
+        <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+        <Dropdown bordered defaultSelected={["Option A"]}>
+          {options.map((option) => (
+            <Option value={option} key={option} />
+          ))}
+        </Dropdown>
+      </TooltrayNext>
+      <Divider orientation="vertical" variant="secondary" />
+      <TooltrayNext>
+        <Text>Description</Text>
+      </TooltrayNext>
+    </ToolbarRegion>
+    <ToolbarRegion position="end">
+      <TooltrayNext>
+        <Dropdown bordered defaultSelected={["Option A"]}>
+          {options.map((option) => (
+            <Option value={option} key={option} />
+          ))}
+        </Dropdown>
+      </TooltrayNext>
+      <Divider orientation="vertical" variant="secondary" />
+      <TooltrayNext role="group" aria-label="Actions">
+        <Button appearance="transparent" aria-label="Grid view">
+          <GridIcon aria-hidden />
+        </Button>
+        <Button appearance="transparent" aria-label="List view">
+          <ListIcon aria-hidden />
+        </Button>
+        <Button appearance="solid">Button</Button>
+      </TooltrayNext>
+    </ToolbarRegion>
+  </ToolbarNext>
+);
+
+export const MixedFormControls: StoryFn<typeof ToolbarNext> = () => (
+  <ToolbarNext aria-label="Mixed controls toolbar">
+    <ToolbarRegion position="start">
+      <TooltrayNext role="group" aria-label="Criteria">
+        <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+        <Dropdown bordered defaultSelected={["Option A"]}>
+          {options.map((option) => (
+            <Option value={option} key={option} />
+          ))}
+        </Dropdown>
+        <DateInputSingle bordered />
+      </TooltrayNext>
+    </ToolbarRegion>
+    <ToolbarRegion position="end">
+      <TooltrayNext role="group" aria-label="Settings and actions">
+        <Switch label="Pinned" />
+        <Button appearance="solid">Run</Button>
+      </TooltrayNext>
+    </ToolbarRegion>
+  </ToolbarNext>
+);
+
+export const RightToLeft: StoryFn<typeof ToolbarNext> = () => (
+  <div dir="rtl">
+    <ToolbarNext aria-label="RTL toolbar">
+      <TooltrayNext role="group" aria-label="Search and filter">
+        <Input bordered startAdornment={<SearchIcon />} placeholder="Search" />
+        <Dropdown bordered defaultSelected={["Option A"]}>
+          {options.map((option) => (
+            <Option value={option} key={option} />
+          ))}
+        </Dropdown>
+      </TooltrayNext>
+      <TooltrayNext role="group" align="end" aria-label="Actions">
+        <Button appearance="transparent" aria-label="Grid view">
+          <GridIcon aria-hidden />
+        </Button>
+        <Button appearance="transparent" aria-label="List view">
+          <ListIcon aria-hidden />
+        </Button>
+        <Button appearance="solid">Button</Button>
+      </TooltrayNext>
+    </ToolbarNext>
+  </div>
+);