diff --git a/.changeset/mosaic-action-bar.md b/.changeset/mosaic-action-bar.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/mosaic-action-bar.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/mosaic/src/components/action-bar/action-bar.styles.ts b/packages/mosaic/src/components/action-bar/action-bar.styles.ts
new file mode 100644
index 00000000000..238cf4e7b1c
--- /dev/null
+++ b/packages/mosaic/src/components/action-bar/action-bar.styles.ts
@@ -0,0 +1,82 @@
+import * as stylex from '@stylexjs/stylex';
+
+import {
+  colorVars,
+  durationVars,
+  easingVars,
+  fontWeightVars,
+  radiusVars,
+  shadowVars,
+  space,
+  typeScaleVars,
+} from '../../tokens.stylex';
+
+const reduceMotion = '@media (prefers-reduced-motion: reduce)';
+
+export const styles = stylex.create({
+  positioner: {
+    pointerEvents: 'none',
+    width: 'max-content',
+  },
+  items: {
+    display: 'contents',
+  },
+  destructive: {
+    '--_cl-icon-color': colorVars['--cl-color-negative'],
+  },
+  bar: {
+    borderRadius: radiusVars['--cl-radius-lg'],
+    gap: space['1'],
+    paddingBlock: space['1'],
+    paddingInline: space['1'],
+    alignItems: 'center',
+    backgroundColor: colorVars['--cl-color-background'],
+    blockSize: space['10'],
+    boxShadow: shadowVars['--cl-shadow-lg'],
+    display: 'flex',
+    flexShrink: 0,
+    opacity: {
+      default: 1,
+      ':where([data-starting-style], [data-ending-style])': 0,
+    },
+    pointerEvents: {
+      default: 'auto',
+      ':where([data-ending-style])': 'none',
+    },
+    transform: {
+      default: 'translateY(0)',
+      [reduceMotion]: {
+        default: 'translateY(0)',
+        ':where([data-starting-style], [data-ending-style])': 'translateY(0)',
+      },
+      ':where([data-starting-style], [data-ending-style])': 'translateY(0.25rem)',
+    },
+    transitionDuration: {
+      default: `${durationVars['--cl-duration-fast']}, ${durationVars['--cl-duration-base']}`,
+      ':where([data-ending-style])': durationVars['--cl-duration-fast'],
+    },
+    transitionProperty: {
+      default: 'opacity, transform',
+      [reduceMotion]: 'opacity',
+    },
+    transitionTimingFunction: {
+      default: easingVars['--cl-ease-enter'],
+      ':where([data-ending-style])': easingVars['--cl-ease-exit'],
+    },
+  },
+  count: {
+    paddingInline: space['2'],
+    color: colorVars['--cl-color-foreground'],
+    fontSize: typeScaleVars['--cl-text-sm-size'],
+    fontWeight: fontWeightVars['--cl-font-medium'],
+    lineHeight: typeScaleVars['--cl-text-sm-leading'],
+    whiteSpace: 'nowrap',
+  },
+  separator: {
+    marginBlock: space['1'],
+    marginInline: space['0.5'],
+    alignSelf: 'stretch',
+    backgroundColor: colorVars['--cl-color-border'],
+    width: '1px',
+  },
+});
diff --git a/packages/mosaic/src/components/action-bar/action-bar.test.tsx b/packages/mosaic/src/components/action-bar/action-bar.test.tsx
new file mode 100644
index 00000000000..4062f773f84
--- /dev/null
+++ b/packages/mosaic/src/components/action-bar/action-bar.test.tsx
@@ -0,0 +1,371 @@
+import * as stylex from '@stylexjs/stylex';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+import { Dialog } from '../dialog';
+import { Menu } from '../menu';
+import { ActionBar } from './action-bar';
+
+const testStyles = stylex.create({
+  positioner: {
+    bottom: '20px',
+  },
+});
+
+function BulkActions({ open = true, onDismiss }: { open?: boolean; onDismiss?: () => void }) {
+  const tableRef = React.useRef<HTMLTableElement>(null);
+  const selectRef = React.useRef<HTMLInputElement>(null);
+  return (
+    <>
+      <table
+        ref={tableRef}
+        id='members'
+      >
+        <tbody>
+          <tr>
+            <td>
+              <input
+                ref={selectRef}
+                type='checkbox'
+                aria-label='Select Kyle'
+              />
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <ActionBar.Root
+        open={open}
+        anchor={tableRef}
+        finalFocus={selectRef}
+        aria-label='Bulk actions'
+        aria-controls='members'
+      >
+        <ActionBar.Count>3 selected</ActionBar.Count>
+        <ActionBar.Separator />
+        <ActionBar.Action>Change role</ActionBar.Action>
+        <ActionBar.Action>Remove</ActionBar.Action>
+        <ActionBar.Separator />
+        <ActionBar.Dismiss onClick={onDismiss} />
+      </ActionBar.Root>
+      <button type='button'>After</button>
+    </>
+  );
+}
+
+function useAnchor() {
+  return React.useRef<HTMLDivElement>(null);
+}
+
+beforeEach(() => {
+  vi.spyOn(HTMLElement.prototype, 'getBoundingClientRect').mockReturnValue(new DOMRect(0, 0, 100, 40));
+  vi.spyOn(document.documentElement, 'clientWidth', 'get').mockReturnValue(1024);
+  vi.spyOn(document.documentElement, 'clientHeight', 'get').mockReturnValue(768);
+});
+
+afterEach(() => {
+  vi.restoreAllMocks();
+});
+
+describe('Mosaic ActionBar', () => {
+  it('renders a labelled toolbar tied to its table and described by its count', () => {
+    render(<BulkActions />);
+    const bar = screen.getByRole('toolbar', { name: 'Bulk actions' });
+    expect(bar).toHaveClass('cl-action-bar');
+    expect(bar).toHaveAttribute('data-open', 'true');
+    expect(bar).toHaveAttribute('aria-controls', 'members');
+    expect(bar).toHaveAttribute('aria-orientation', 'horizontal');
+    expect(bar).toHaveAccessibleDescription('3 selected');
+    expect(screen.getAllByRole('separator')).toHaveLength(2);
+  });
+
+  it('renders nothing while closed', () => {
+    render(<BulkActions open={false} />);
+    expect(screen.queryByRole('toolbar', { hidden: true })).not.toBeInTheDocument();
+  });
+
+  it('announces the bar opening, then selection changes, from outside the bar', () => {
+    function Selection({ count }: { count: number }) {
+      return (
+        <ActionBar.Root
+          open={count > 0}
+          anchor={useAnchor()}
+          aria-label='Bulk actions'
+          announcement={`${count} selected`}
+          openAnnouncement={`${count} selected, bulk actions follow the table`}
+        >
+          <ActionBar.Count>{count} selected</ActionBar.Count>
+        </ActionBar.Root>
+      );
+    }
+    const { rerender } = render(<Selection count={0} />);
+    const status = screen.getByRole('status');
+    expect(status).toHaveTextContent('');
+    expect(status.closest('[role="toolbar"]')).toBeNull();
+
+    rerender(<Selection count={1} />);
+    expect(status).toHaveTextContent('1 selected, bulk actions follow the table');
+
+    rerender(<Selection count={3} />);
+    expect(status).toHaveTextContent(/^3 selected$/);
+
+    rerender(<Selection count={0} />);
+    expect(status).toHaveTextContent('');
+
+    rerender(<Selection count={2} />);
+    expect(status).toHaveTextContent('2 selected, bulk actions follow the table');
+  });
+
+  it('styles the positioner independently from the bar', () => {
+    function Positioned() {
+      return (
+        <ActionBar.Root
+          open
+          anchor={useAnchor()}
+          aria-label='Bulk actions'
+          positionerXstyle={testStyles.positioner}
+        />
+      );
+    }
+    render(<Positioned />);
+    expect(screen.getByRole('toolbar', { name: 'Bulk actions' }).parentElement).toHaveClass(
+      ...(stylex.props(testStyles.positioner).className as string).split(' '),
+    );
+  });
+
+  it('is a single tab stop', async () => {
+    const user = userEvent.setup();
+    render(<BulkActions />);
+    await user.click(screen.getByRole('checkbox', { name: 'Select Kyle' }));
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Change role' })).toHaveFocus();
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'After' })).toHaveFocus();
+  });
+
+  it('moves between controls with the arrow keys, wrapping at the ends', async () => {
+    const user = userEvent.setup();
+    render(<BulkActions />);
+    await user.click(screen.getByRole('checkbox', { name: 'Select Kyle' }));
+    await user.tab();
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('button', { name: 'Remove' })).toHaveFocus();
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('button', { name: 'Clear selection' })).toHaveFocus();
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('button', { name: 'Change role' })).toHaveFocus();
+    await user.keyboard('{ArrowLeft}');
+    expect(screen.getByRole('button', { name: 'Clear selection' })).toHaveFocus();
+  });
+
+  it('returns to the last focused control when tabbed back into', async () => {
+    const user = userEvent.setup();
+    render(<BulkActions />);
+    await user.click(screen.getByRole('checkbox', { name: 'Select Kyle' }));
+    await user.tab();
+    await user.keyboard('{ArrowRight}');
+    await user.tab({ shift: true });
+    await user.tab();
+    expect(screen.getByRole('button', { name: 'Remove' })).toHaveFocus();
+  });
+
+  it('leaves arrow keys inside a portalled menu to the menu', async () => {
+    const user = userEvent.setup();
+    function WithMenu() {
+      return (
+        <ActionBar.Root
+          open
+          anchor={useAnchor()}
+          aria-label='Bulk actions'
+        >
+          <Menu.Root>
+            <Menu.Trigger render={<ActionBar.Action />}>Change role</Menu.Trigger>
+            <Menu.Popup>
+              <Menu.Item label='Admin'>
+                <Menu.Label>Admin</Menu.Label>
+              </Menu.Item>
+            </Menu.Popup>
+          </Menu.Root>
+          <ActionBar.Action>Remove</ActionBar.Action>
+        </ActionBar.Root>
+      );
+    }
+    render(<WithMenu />);
+    await user.click(screen.getByRole('button', { name: 'Change role' }));
+    const item = await screen.findByRole('menuitem', { name: 'Admin' });
+    item.focus();
+    await user.keyboard('{ArrowRight}');
+    expect(screen.getByRole('button', { name: 'Remove' })).not.toHaveFocus();
+  });
+
+  it('sends focus to finalFocus when the bar closes around it', async () => {
+    const user = userEvent.setup();
+    function Harness() {
+      const [open, setOpen] = React.useState(true);
+      return (
+        <BulkActions
+          open={open}
+          onDismiss={() => setOpen(false)}
+        />
+      );
+    }
+    render(<Harness />);
+    const checkbox = screen.getByRole('checkbox', { name: 'Select Kyle' });
+    await user.click(checkbox);
+    await user.tab();
+    await user.keyboard('{ArrowLeft}{Enter}');
+    await waitFor(() => expect(checkbox).toHaveFocus());
+  });
+
+  it('resolves a function finalFocus when it closes', async () => {
+    const user = userEvent.setup();
+    function Harness() {
+      const [open, setOpen] = React.useState(true);
+      return (
+        <>
+          <button type='button'>Next row</button>
+          <ActionBar.Root
+            open={open}
+            anchor={useAnchor()}
+            aria-label='Bulk actions'
+            finalFocus={() => screen.getByRole('button', { name: 'Next row' })}
+          >
+            <ActionBar.Dismiss onClick={() => setOpen(false)} />
+          </ActionBar.Root>
+        </>
+      );
+    }
+    render(<Harness />);
+    await user.click(screen.getByRole('button', { name: 'Next row' }));
+    await user.tab();
+    await user.keyboard('{Enter}');
+    await waitFor(() => expect(screen.getByRole('button', { name: 'Next row' })).toHaveFocus());
+  });
+
+  it('dismisses with a labelled button', async () => {
+    const onDismiss = vi.fn();
+    render(<BulkActions onDismiss={onDismiss} />);
+    await userEvent.click(screen.getByRole('button', { name: 'Clear selection' }));
+    expect(onDismiss).toHaveBeenCalledOnce();
+  });
+  describe('with a menu', () => {
+    function ChangeRole() {
+      const [selected, setSelected] = React.useState(true);
+      const selectAllRef = React.useRef<HTMLInputElement>(null);
+      return (
+        <>
+          <input
+            ref={selectAllRef}
+            type='checkbox'
+            aria-label='Select all'
+          />
+          <ActionBar.Root
+            open={selected}
+            anchor={selectAllRef}
+            aria-label='Bulk actions'
+            finalFocus={selectAllRef}
+          >
+            <Menu.Root>
+              <Menu.Trigger render={<ActionBar.Action />}>Change role</Menu.Trigger>
+              <Menu.Popup>
+                <Menu.Item
+                  label='Admin'
+                  onClick={() => setSelected(false)}
+                >
+                  <Menu.Label>Admin</Menu.Label>
+                </Menu.Item>
+              </Menu.Popup>
+            </Menu.Root>
+            <ActionBar.Action>Remove</ActionBar.Action>
+          </ActionBar.Root>
+          <button type='button'>After</button>
+        </>
+      );
+    }
+
+    it('sends focus to finalFocus when a menu item closes the bar', async () => {
+      const user = userEvent.setup();
+      render(<ChangeRole />);
+      await user.click(screen.getByRole('checkbox', { name: 'Select all' }));
+      await user.tab();
+      await user.keyboard('{Enter}');
+      await screen.findByRole('menuitem', { name: 'Admin' });
+      await user.keyboard('{Enter}');
+      await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Select all' })).toHaveFocus());
+      await waitFor(() => expect(screen.queryByRole('toolbar', { hidden: true })).not.toBeInTheDocument());
+    });
+
+    it('lets Tab leave an open menu and Shift+Tab come back to the bar', async () => {
+      const user = userEvent.setup();
+      render(<ChangeRole />);
+      await user.click(screen.getByRole('checkbox', { name: 'Select all' }));
+      await user.tab();
+      await user.keyboard('{Enter}');
+      await screen.findByRole('menuitem', { name: 'Admin' });
+      await user.tab();
+      await waitFor(() => expect(screen.getByRole('button', { name: 'After' })).toHaveFocus());
+      await user.tab({ shift: true });
+      expect(screen.getByRole('button', { name: 'Change role' })).toHaveFocus();
+    });
+  });
+
+  describe('with a confirmation dialog beside the bar', () => {
+    function ConfirmRemove() {
+      const [selected, setSelected] = React.useState(true);
+      const handle = React.useMemo(() => Dialog.createHandle(), []);
+      const selectRef = React.useRef<HTMLInputElement>(null);
+      return (
+        <>
+          <input
+            ref={selectRef}
+            type='checkbox'
+            aria-label='Select Kyle'
+          />
+          <ActionBar.Root
+            open={selected}
+            anchor={selectRef}
+            aria-label='Bulk actions'
+            finalFocus={selectRef}
+          >
+            <Dialog.Trigger
+              handle={handle}
+              render={<ActionBar.Action color='negative' />}
+            >
+              Remove
+            </Dialog.Trigger>
+          </ActionBar.Root>
+          <Dialog.Root
+            handle={handle}
+            role='alertdialog'
+          >
+            <Dialog.Popup finalFocus={() => (selected ? undefined : selectRef.current)}>
+              <Dialog.Close>Cancel</Dialog.Close>
+              <Dialog.Close onClick={() => setSelected(false)}>Confirm</Dialog.Close>
+            </Dialog.Popup>
+          </Dialog.Root>
+        </>
+      );
+    }
+
+    it('returns focus to the bar when the dialog is cancelled', async () => {
+      const user = userEvent.setup();
+      render(<ConfirmRemove />);
+      await user.click(screen.getByRole('checkbox', { name: 'Select Kyle' }));
+      await user.tab();
+      await user.keyboard('{Enter}');
+      await user.click(await screen.findByRole('button', { name: 'Cancel' }));
+      await waitFor(() => expect(screen.getByRole('button', { name: 'Remove' })).toHaveFocus());
+    });
+
+    it('sends focus to finalFocus when the dialog confirms', async () => {
+      const user = userEvent.setup();
+      render(<ConfirmRemove />);
+      await user.click(screen.getByRole('checkbox', { name: 'Select Kyle' }));
+      await user.tab();
+      await user.keyboard('{Enter}');
+      await user.click(await screen.findByRole('button', { name: 'Confirm' }));
+      await waitFor(() => expect(screen.getByRole('checkbox', { name: 'Select Kyle' })).toHaveFocus());
+    });
+  });
+});
diff --git a/packages/mosaic/src/components/action-bar/action-bar.tsx b/packages/mosaic/src/components/action-bar/action-bar.tsx
new file mode 100644
index 00000000000..d4a85a45516
--- /dev/null
+++ b/packages/mosaic/src/components/action-bar/action-bar.tsx
@@ -0,0 +1,335 @@
+import {
+  autoUpdate,
+  Composite,
+  CompositeItem,
+  FloatingFocusManager,
+  FloatingPortal,
+  getOverflowAncestors,
+  hide,
+  limitShift,
+  offset,
+  shift,
+  useFloating,
+  useMergeRefs,
+} from '@floating-ui/react';
+import { activeElement, contains, getDocument, getTarget, useLatestRef } from '@floating-ui/react/utils';
+import * as stylex from '@stylexjs/stylex';
+import React from 'react';
+
+import { useAnimationsFinished, useTransitionStatus } from '../../primitives/hooks';
+import { mergeProps, useRender } from '../../primitives/utils';
+import { getComputedStyle } from '../../primitives/utils/dom';
+import type { MosaicComponentProps, XStyle } from '../../props';
+import { mergeStyleProps, themeProps } from '../../props';
+import { reset } from '../../utils/reset.styles';
+import { tabularNumbersStyle } from '../../utils/typography.styles';
+import type { ButtonProps } from '../button';
+import { Button } from '../button';
+import { Icon } from '../icon';
+import { VisuallyHidden } from '../visually-hidden';
+import { styles } from './action-bar.styles';
+
+const EDGE_GAP = 16;
+
+const ActionBarContext = React.createContext<{ countId: string } | null>(null);
+
+function scrollingAncestors(element: Element): Element[] {
+  return getOverflowAncestors(element).filter(
+    (node): node is Element =>
+      node instanceof Element &&
+      node.scrollHeight > node.clientHeight &&
+      /auto|scroll|overlay/.test(getComputedStyle(node).overflowY),
+  );
+}
+
+export interface ActionBarRootProps extends MosaicComponentProps<'div'> {
+  /** Whether the bar is shown. */
+  open: boolean;
+  /** The table the bar rests on. */
+  anchor: React.RefObject<HTMLElement | null>;
+  /** Where the bar is portalled. Inside a modal dialog, pass its popup. */
+  portalRoot?: HTMLElement | null;
+  /** Where focus goes when the bar closes while holding it: an element ref, or a function returning one. */
+  finalFocus?: React.RefObject<HTMLElement | null> | (() => HTMLElement | null);
+  /** Announced when the selection changes while the bar is open, e.g. `3 selected`. */
+  announcement?: string;
+  /** Announced when the bar opens, e.g. `1 selected, bulk actions follow the table`. Defaults to `announcement`. */
+  openAnnouncement?: string;
+  positionerXstyle?: XStyle;
+}
+
+const Root = React.forwardRef<HTMLDivElement, ActionBarRootProps>(function ActionBarRoot(
+  {
+    open,
+    anchor,
+    portalRoot,
+    finalFocus,
+    announcement,
+    openAnnouncement,
+    render,
+    xstyle,
+    positionerXstyle,
+    children,
+    ...rest
+  },
+  ref,
+) {
+  const barRef = React.useRef<HTMLDivElement | null>(null);
+  const countId = React.useId();
+  const context = React.useMemo(() => ({ countId }), [countId]);
+  const openChildrenRef = React.useRef(children);
+  if (open) {
+    openChildrenRef.current = children;
+  }
+
+  const wasOpenRef = React.useRef(false);
+  const [status, setStatus] = React.useState('');
+  React.useLayoutEffect(() => {
+    const wasOpen = wasOpenRef.current;
+    wasOpenRef.current = open;
+    if (!open) {
+      setStatus('');
+    } else if (!wasOpen) {
+      setStatus(openAnnouncement ?? announcement ?? '');
+    } else {
+      setStatus(announcement ?? '');
+    }
+  }, [open, announcement, openAnnouncement]);
+
+  const {
+    refs,
+    floatingStyles,
+    middlewareData,
+    context: floatingContext,
+  } = useFloating({
+    open,
+    placement: 'bottom',
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(({ rects }) => -rects.floating.height / 4),
+      {
+        name: 'shiftIntoScrollport',
+        fn: state =>
+          shift({
+            mainAxis: false,
+            crossAxis: true,
+            boundary: scrollingAncestors(state.elements.reference as Element),
+            padding: EDGE_GAP,
+            limiter: limitShift({ mainAxis: false, crossAxis: true }),
+          }).fn(state),
+      },
+      hide(),
+    ],
+  });
+
+  React.useLayoutEffect(() => {
+    refs.setReference(anchor.current);
+  });
+
+  const { mounted, transitionStatus, setMounted } = useTransitionStatus(open);
+  const runOnAnimationsFinished = useAnimationsFinished(barRef, open);
+
+  const focusWithinRef = React.useRef(false);
+  const finalFocusRef = useLatestRef(finalFocus);
+
+  React.useEffect(() => {
+    if (transitionStatus !== 'ending') {
+      return;
+    }
+    const moveFocus = () => {
+      const target = finalFocusRef.current;
+      (typeof target === 'function' ? target() : target?.current)?.focus();
+    };
+    const bar = barRef.current;
+    if (bar && contains(bar, activeElement(getDocument(bar)))) {
+      moveFocus();
+    }
+    return runOnAnimationsFinished(() => {
+      if (focusWithinRef.current) {
+        moveFocus();
+      }
+      setMounted(false);
+    });
+  }, [transitionStatus, runOnAnimationsFinished, finalFocusRef, setMounted]);
+
+  const guardPortalledKeys = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    const bar = barRef.current;
+    if (!bar || !contains(bar, getTarget(event.nativeEvent) as Element)) {
+      event.stopPropagation();
+    }
+  };
+
+  const floatingRef = useMergeRefs([refs.setFloating, ref]);
+
+  return (
+    <ActionBarContext.Provider value={context}>
+      <VisuallyHidden
+        role='status'
+        aria-live='polite'
+        aria-atomic
+      >
+        {status}
+      </VisuallyHidden>
+      {mounted ? (
+        <FloatingPortal root={portalRoot}>
+          <FloatingFocusManager
+            context={floatingContext}
+            modal={false}
+            initialFocus={-1}
+            returnFocus={false}
+            closeOnFocusOut={false}
+          >
+            <div
+              ref={floatingRef}
+              style={{
+                ...floatingStyles,
+                visibility: middlewareData.hide?.referenceHidden ? 'hidden' : undefined,
+              }}
+              {...mergeStyleProps(
+                themeProps('action-bar-positioner'),
+                stylex.props(reset.base, styles.positioner, positionerXstyle),
+              )}
+            >
+              <Composite
+                orientation='horizontal'
+                loop
+                render={(compositeProps: React.HTMLAttributes<HTMLElement>) => {
+                  const { ref: compositeRef, ...merged } = mergeProps<'div'>(
+                    {
+                      'aria-describedby': countId,
+                      ...mergeStyleProps(
+                        themeProps('action-bar', { open }),
+                        stylex.props(reset.base, styles.bar, xstyle),
+                        rest,
+                      ),
+                    },
+                    compositeProps as Record<string, unknown>,
+                  );
+                  // eslint-disable-next-line react-hooks/rules-of-hooks
+                  return useRender({
+                    defaultTagName: 'div',
+                    render,
+                    ref: [barRef, compositeRef as React.Ref<unknown>],
+                    props: {
+                      ...merged,
+                      ...(transitionStatus === 'starting'
+                        ? { 'data-starting-style': '', style: { transition: 'none' } }
+                        : null),
+                      ...(transitionStatus === 'ending' ? { 'data-ending-style': '' } : null),
+                      'data-open': open,
+                      role: 'toolbar',
+                      onFocus: () => {
+                        focusWithinRef.current = true;
+                      },
+                      onBlur: () => {
+                        focusWithinRef.current = false;
+                      },
+                      children: (
+                        <div
+                          role='presentation'
+                          onKeyDown={guardPortalledKeys}
+                          {...stylex.props(styles.items)}
+                        >
+                          {open ? children : openChildrenRef.current}
+                        </div>
+                      ),
+                    },
+                  });
+                }}
+              />
+            </div>
+          </FloatingFocusManager>
+        </FloatingPortal>
+      ) : null}
+    </ActionBarContext.Provider>
+  );
+});
+
+export type ActionBarActionProps = ButtonProps;
+
+const Action = React.forwardRef<HTMLButtonElement, ActionBarActionProps>(function ActionBarAction(
+  { color, xstyle, ...rest },
+  ref,
+) {
+  return (
+    <CompositeItem
+      render={(itemProps: React.HTMLAttributes<HTMLElement>) => {
+        const { ref: itemRef, ...merged } = mergeProps<'button'>(
+          rest as Record<string, unknown>,
+          itemProps as Record<string, unknown>,
+        );
+        return (
+          <Button
+            variant='ghost'
+            size='md'
+            color={color}
+            {...merged}
+            // eslint-disable-next-line react-hooks/rules-of-hooks
+            ref={useMergeRefs([ref, itemRef as React.Ref<HTMLButtonElement>])}
+            xstyle={[color === 'negative' && styles.destructive, xstyle]}
+          />
+        );
+      }}
+    />
+  );
+});
+
+export type ActionBarCountProps = Omit<MosaicComponentProps<'div'>, 'id'>;
+
+const Count = React.forwardRef<HTMLDivElement, ActionBarCountProps>(function ActionBarCount(
+  { render, xstyle, ...rest },
+  ref,
+) {
+  const countId = React.useContext(ActionBarContext)?.countId;
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    ref,
+    props: {
+      ...mergeStyleProps(
+        themeProps('action-bar-count'),
+        stylex.props(reset.base, styles.count, tabularNumbersStyle.enabled, xstyle),
+        rest,
+      ),
+      id: countId,
+    },
+  });
+});
+
+export type ActionBarSeparatorProps = MosaicComponentProps<'div'>;
+
+const Separator = React.forwardRef<HTMLDivElement, ActionBarSeparatorProps>(function ActionBarSeparator(
+  { render, xstyle, ...rest },
+  ref,
+) {
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    ref,
+    props: {
+      ...mergeStyleProps(themeProps('action-bar-separator'), stylex.props(reset.base, styles.separator, xstyle), rest),
+      role: 'separator',
+      'aria-orientation': 'vertical',
+    },
+  });
+});
+
+export type ActionBarDismissProps = Omit<ActionBarActionProps, 'children'>;
+
+const Dismiss = React.forwardRef<HTMLButtonElement, ActionBarDismissProps>(function ActionBarDismiss(
+  { 'aria-label': ariaLabel, ...rest },
+  ref,
+) {
+  return (
+    <Action
+      ref={ref}
+      shape='square'
+      aria-label={ariaLabel ?? 'Clear selection'}
+      {...mergeStyleProps(themeProps('action-bar-dismiss'), rest)}
+    >
+      <Icon name='x' />
+    </Action>
+  );
+});
+
+export const ActionBar = { Root, Action, Count, Separator, Dismiss };
diff --git a/packages/mosaic/src/components/action-bar/index.ts b/packages/mosaic/src/components/action-bar/index.ts
new file mode 100644
index 00000000000..4008e2405a7
--- /dev/null
+++ b/packages/mosaic/src/components/action-bar/index.ts
@@ -0,0 +1,8 @@
+export { ActionBar } from './action-bar';
+export type {
+  ActionBarActionProps,
+  ActionBarCountProps,
+  ActionBarDismissProps,
+  ActionBarRootProps,
+  ActionBarSeparatorProps,
+} from './action-bar';
diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx
index 89807ba58c5..a0af7e29813 100644
--- a/packages/swingset/src/components/DocsViewer.tsx
+++ b/packages/swingset/src/components/DocsViewer.tsx
@@ -56,6 +56,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
     destructive: dynamic(() => import('../stories/destructive.mdx')),
   },
   components: {
+    'action-bar': dynamic(() => import('../stories/action-bar.mdx')),
     avatar: dynamic(() => import('../stories/avatar.mdx')),
     badge: dynamic(() => import('../stories/badge.mdx')),
     banner: dynamic(() => import('../stories/banner.mdx')),
diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index 3dd91747be2..5eb69a5170c 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -1,5 +1,11 @@
 // Import stories explicitly to control order and avoid type casting through unknown.
 import { meta as accordionMeta } from '../stories/accordion.stories';
+import {
+  Default as ActionBarDefault,
+  InDialog as ActionBarInDialog,
+  Inline as ActionBarInline,
+  meta as actionBarMeta,
+} from '../stories/action-bar.stories';
 import { meta as autocompleteMeta } from '../stories/autocomplete.stories';
 import {
   Fallback as AvatarFallbackStory,
@@ -472,6 +478,13 @@ const organizationProfileDangerSectionModule: StoryModule = {
   LeaveOnly: OrganizationProfileDangerSectionLeaveOnly,
 };
 
+const actionBarModule: StoryModule = {
+  meta: actionBarMeta,
+  Default: ActionBarDefault,
+  InDialog: ActionBarInDialog,
+  Inline: ActionBarInline,
+};
+
 const avatarModule: StoryModule = {
   meta: avatarMeta,
   Primary: AvatarPrimary,
@@ -896,6 +909,7 @@ export const registry: StoryModule[] = [
   confirmationModule,
   destructiveModule,
   // Components
+  actionBarModule,
   avatarModule,
   badgeModule,
   bannerModule,
diff --git a/packages/swingset/src/stories/action-bar.mdx b/packages/swingset/src/stories/action-bar.mdx
new file mode 100644
index 00000000000..1d1a3b05ca9
--- /dev/null
+++ b/packages/swingset/src/stories/action-bar.mdx
@@ -0,0 +1,109 @@
+import * as ActionBarStories from './action-bar.stories';
+
+# ActionBar
+
+A floating toolbar of actions for a current selection. It rests on the bottom edge of the table it
+acts on and, while that edge is scrolled out of view, stays pinned to the foot of the nearest scroll
+container — the content column of a profile in a dialog, or the page when the profile is inline. It
+is portalled, so no ancestor clips it. It mounts when opened and unmounts once it has animated out.
+
+## Example
+
+<Story
+  name='Default'
+  storyModule={ActionBarStories}
+  composition={[
+    { name: 'Button', href: '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/components/button', layer: 'Components' },
+    { name: 'Menu', href: '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/components/menu', layer: 'Components' },
+  ]}
+/>
+
+### In a profile dialog
+
+<Story
+  name='InDialog'
+  storyModule={ActionBarStories}
+/>
+
+### Inline
+
+<Story
+  name='Inline'
+  storyModule={ActionBarStories}
+/>
+
+## Usage
+
+```tsx
+<Table.Root ref={tableRef} id={tableId}>{/* rows */}</Table.Root>
+<ActionBar.Root
+  open={selectedCount > 0}
+  anchor={tableRef}
+  aria-label='Bulk actions'
+  aria-controls={tableId}
+  finalFocus={selectAllRef}
+  announcement={`${selectedCount} selected`}
+  openAnnouncement={`${selectedCount} selected, bulk actions follow the table`}
+>
+  <ActionBar.Count>{selectedCount} selected</ActionBar.Count>
+  <ActionBar.Separator />
+  <Menu.Root>
+    <Menu.Trigger render={<ActionBar.Action />}>Change role</Menu.Trigger>
+    {/* … */}
+  </Menu.Root>
+  <ActionBar.Action color='negative' shape='square' aria-label='Remove'>
+    <Icon name='trash' />
+  </ActionBar.Action>
+  <ActionBar.Separator />
+  <ActionBar.Dismiss onClick={clearSelection} />
+</ActionBar.Root>
+```
+
+Inside a modal dialog, pass the dialog's popup element as `portalRoot`, so the bar stays inside the
+dialog.
+
+To confirm a destructive action, render the `Dialog` beside the bar rather than inside it. Put a
+`Dialog.Trigger` with a `handle` in the bar, and point the popup's `finalFocus` at the select-all
+checkbox for when the confirmation closes the bar.
+
+## Parts
+
+| Part                  | Element  | Description                                                                                  |
+| --------------------- | -------- | -------------------------------------------------------------------------------------------- |
+| `ActionBar.Root`      | `div`    | The positioner + floating surface, portalled. Takes `open` and `anchor`; `role=toolbar`.     |
+| `ActionBar.Action`    | `button` | A ghost button in the bar's arrow-key navigation. `render` it from a menu or dialog trigger. |
+| `ActionBar.Count`     | `div`    | The leading count of what is selected. Describes the toolbar.                                |
+| `ActionBar.Separator` | `div`    | A vertical divider between groups.                                                           |
+| `ActionBar.Dismiss`   | `button` | Clears the selection. An icon `ActionBar.Action`; labelled `Clear selection`.                |
+
+## Props
+
+### `ActionBar.Root`
+
+| Prop               | Type                                                  | Default         | Description                                                 |
+| ------------------ | ----------------------------------------------------- | --------------- | ----------------------------------------------------------- |
+| `open`             | `boolean`                                             | — (required)    | Whether the bar is shown.                                   |
+| `anchor`           | `RefObject<HTMLElement>`                              | — (required)    | The table the bar rests on.                                 |
+| `portalRoot`       | `HTMLElement \| null`                                 | `document.body` | Where the bar is portalled. `null` waits for the element.   |
+| `finalFocus`       | `RefObject<HTMLElement> \| () => HTMLElement \| null` | —               | Where focus goes when the bar closes while holding it.      |
+| `announcement`     | `string`                                              | —               | Announced when the selection changes while the bar is open. |
+| `openAnnouncement` | `string`                                              | `announcement`  | Announced when the bar opens.                               |
+
+### `ActionBar.Action`
+
+Takes `Button`'s props. `color='negative'` draws the icon at full strength.
+
+## Accessibility
+
+- The bar is a single tab stop, in tab order right after where `ActionBar.Root` renders. `←` / `→`
+  move between its actions and wrap.
+- Give it an `aria-label`, and point `aria-controls` at the table's `id`.
+- A status region outside the bar announces `openAnnouncement` when the bar opens and
+  `announcement` when the selection changes after that. Closing is silent.
+- When the bar closes while it holds focus, including from a menu or dialog opened inside it, focus
+  moves to `finalFocus`: the table's select-all checkbox, or a function that picks an element when the bar closes.
+
+## Styling
+
+`ActionBar.Root` reflects `data-open` (`true` / `false`) on its surface, and `data-starting-style` /
+`data-ending-style` while it animates in and out.
diff --git a/packages/swingset/src/stories/action-bar.stories.tsx b/packages/swingset/src/stories/action-bar.stories.tsx
new file mode 100644
index 00000000000..cd80168f809
--- /dev/null
+++ b/packages/swingset/src/stories/action-bar.stories.tsx
@@ -0,0 +1,205 @@
+import { ActionBar } from '@clerk/mosaic/components/action-bar';
+import { Button } from '@clerk/mosaic/components/button';
+import { Dialog } from '@clerk/mosaic/components/dialog';
+import { Icon } from '@clerk/mosaic/components/icon';
+import { Menu } from '@clerk/mosaic/components/menu';
+import { Profile } from '@clerk/mosaic/components/profile';
+import { Table } from '@clerk/mosaic/components/table';
+import { useDataTable } from '@clerk/mosaic/primitives/hooks';
+import type { ComponentProps } from 'react';
+import { useId, useRef, useState } from 'react';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './action-bar.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'Components',
+  title: 'ActionBar',
+  status: 'wip',
+  layout: 'wide',
+  source: 'packages/mosaic/src/components/action-bar/action-bar.tsx',
+};
+
+const members = [
+  { id: 'kyle', name: 'Kyle Mac', role: 'Member' },
+  { id: 'austin', name: 'Austin Calvelage', role: 'Member' },
+  { id: 'colin', name: 'Colin Sidoti', role: 'Admin' },
+  { id: 'max', name: 'Max Yinger', role: 'Member' },
+  { id: 'preston', name: 'Preston Booth', role: 'Member' },
+  { id: 'richard', name: 'Richard Hendricks', role: 'Member' },
+  { id: 'monica', name: 'Monica Hall', role: 'Admin' },
+  { id: 'jared', name: 'Jared Dunn', role: 'Member' },
+  { id: 'dinesh', name: 'Dinesh Chugtai', role: 'Member' },
+  { id: 'steve', name: 'Steve Hayes', role: 'Admin' },
+  { id: 'gavin', name: 'Gavin Belson', role: 'Admin' },
+  { id: 'laurie', name: 'Laurie Bream', role: 'Member' },
+  { id: 'erlich', name: 'Erlich Bachman', role: 'Member' },
+  { id: 'big-head', name: 'Nelson Bighetti', role: 'Member' },
+  { id: 'carla', name: 'Carla Walton', role: 'Member' },
+  { id: 'russ', name: 'Russ Hanneman', role: 'Admin' },
+  { id: 'peter', name: 'Peter Gregory', role: 'Member' },
+  { id: 'ron', name: 'Ron LaFlamme', role: 'Member' },
+];
+
+function MembersTable({ rows = 10, portalRoot }: { rows?: number; portalRoot?: HTMLElement | null }) {
+  const tableId = useId();
+  const tableRef = useRef<HTMLTableElement>(null);
+  const selectAllRef = useRef<HTMLInputElement>(null);
+  const table = useDataTable({ data: members.slice(0, rows), getRowId: row => row.id });
+  const count = Object.values(table.rowSelection).filter(Boolean).length;
+  const clearSelection = () => table.setRowSelection({});
+
+  return (
+    <>
+      <Table.Root
+        ref={tableRef}
+        id={tableId}
+      >
+        <Table.Header>
+          <Table.Row>
+            <Table.SelectAllCell
+              ref={selectAllRef}
+              aria-label='Select all members'
+              checked={table.getIsAllRowsSelected()}
+              indeterminate={table.getIsSomeRowsSelected()}
+              onChange={() => table.toggleAllRowsSelected()}
+            />
+            <Table.HeaderCell>Name</Table.HeaderCell>
+            <Table.HeaderCell>Role</Table.HeaderCell>
+          </Table.Row>
+        </Table.Header>
+        <Table.Body>
+          {table.rows.map(row => (
+            <Table.Row
+              key={row.id}
+              selected={row.getIsSelected()}
+            >
+              <Table.SelectCell
+                aria-label={`Select ${row.original.name}`}
+                checked={row.getIsSelected()}
+                onToggleSelected={row.toggleSelected}
+              />
+              <Table.Cell>{row.original.name}</Table.Cell>
+              <Table.Cell>{row.original.role}</Table.Cell>
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table.Root>
+      <ActionBar.Root
+        open={count > 0}
+        anchor={tableRef}
+        portalRoot={portalRoot}
+        aria-label='Bulk actions'
+        aria-controls={tableId}
+        finalFocus={selectAllRef}
+        announcement={`${count} selected`}
+        openAnnouncement={`${count} selected, bulk actions follow the table`}
+      >
+        <ActionBar.Count>{count} selected</ActionBar.Count>
+        <ActionBar.Separator />
+        <Menu.Root placement='top'>
+          <Menu.Trigger render={<ActionBar.Action />}>
+            Change role
+            <Icon
+              name='chevron-down'
+              placement='inline-end'
+            />
+          </Menu.Trigger>
+          <Menu.Popup>
+            <Menu.Item
+              label='Admin'
+              onClick={clearSelection}
+            >
+              <Menu.Label>Admin</Menu.Label>
+            </Menu.Item>
+            <Menu.Item
+              label='Member'
+              onClick={clearSelection}
+            >
+              <Menu.Label>Member</Menu.Label>
+            </Menu.Item>
+          </Menu.Popup>
+        </Menu.Root>
+        <ActionBar.Separator />
+        <ActionBar.Action
+          color='negative'
+          shape='square'
+          aria-label='Remove selected'
+          onClick={clearSelection}
+        >
+          <Icon name='trash' />
+        </ActionBar.Action>
+        <ActionBar.Separator />
+        <ActionBar.Dismiss onClick={clearSelection} />
+      </ActionBar.Root>
+    </>
+  );
+}
+
+export function Default() {
+  return (
+    <div style={{ height: 420, width: '100%', overflowY: 'auto', padding: 16 }}>
+      <MembersTable />
+      <p style={{ marginBlock: 32 }}>1–10 of 10</p>
+    </div>
+  );
+}
+
+function MembersProfile({
+  portalRoot,
+  ...props
+}: Partial<ComponentProps<typeof Profile.Root>> & { portalRoot?: HTMLElement | null }) {
+  return (
+    <Profile.Root
+      value='members'
+      {...props}
+    >
+      <Profile.Title>Workspace</Profile.Title>
+      <Profile.Nav>
+        <Profile.NavItem
+          value='members'
+          icon={
+            <Icon
+              name='users'
+              size='sm'
+            />
+          }
+        >
+          Members
+        </Profile.NavItem>
+      </Profile.Nav>
+      <Profile.Content>
+        <Profile.ContentPanel value='members'>
+          <div style={{ display: 'grid', gap: 24 }}>
+            <Profile.PageTitle>Members</Profile.PageTitle>
+            <MembersTable
+              rows={members.length}
+              portalRoot={portalRoot}
+            />
+            <p>1–18 of 18</p>
+          </div>
+        </Profile.ContentPanel>
+      </Profile.Content>
+    </Profile.Root>
+  );
+}
+
+export function InDialog() {
+  const [popup, setPopup] = useState<HTMLDivElement | null>(null);
+  return (
+    <Dialog.Root>
+      <Dialog.Trigger render={<Button />}>Manage workspace</Dialog.Trigger>
+      <Dialog.Popup
+        ref={setPopup}
+        variant='profile'
+      >
+        <MembersProfile portalRoot={popup} />
+      </Dialog.Popup>
+    </Dialog.Root>
+  );
+}
+
+export function Inline() {
+  return <MembersProfile elevation='flush' />;
+}