diff --git a/.changeset/hip-moles-jam.md b/.changeset/hip-moles-jam.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/hip-moles-jam.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/headless/package.json b/packages/headless/package.json
index 1353767e78c..91e2b341f7c 100644
--- a/packages/headless/package.json
+++ b/packages/headless/package.json
@@ -9,6 +9,10 @@
       "import": "./dist/primitives/accordion/index.js",
       "types": "./dist/primitives/accordion/index.d.ts"
     },
+    "./button": {
+      "import": "./dist/primitives/button/index.js",
+      "types": "./dist/primitives/button/index.d.ts"
+    },
     "./tabs": {
       "import": "./dist/primitives/tabs/index.js",
       "types": "./dist/primitives/tabs/index.d.ts"
diff --git a/packages/headless/src/primitives/button/README.md b/packages/headless/src/primitives/button/README.md
new file mode 100644
index 00000000000..30c1a2bbf6e
--- /dev/null
+++ b/packages/headless/src/primitives/button/README.md
@@ -0,0 +1,67 @@
+# Button
+
+A button with the disabled behaviour a native `<button>` cannot express: staying focusable while inert, and behaving like a button on elements that aren't one.
+
+## When to Use
+
+- A button that disables itself mid-interaction — while a form submits, while a request is in flight. Use `focusableWhenDisabled` so focus is not dropped to the body and the user keeps their place on the page.
+- Rendering a button as a link or a `<span>`. Pass `nativeButton={false}` so the role, tab order, and Enter/Space activation are applied.
+- A plain always-enabled button needs neither prop, and a bare `<button>` is fine.
+
+## Usage
+
+```tsx
+import { Button } from '@/primitives/button';
+
+<Button onClick={save}>Save</Button>;
+```
+
+### Focusable while disabled
+
+```tsx
+<Button
+  type='submit'
+  disabled={submitting}
+  focusableWhenDisabled
+>
+  Save
+</Button>
+```
+
+The button keeps its place in the tab order, is marked `aria-disabled`, and ignores clicks and keyboard activation. Focus is not pulled off its current element by a pointer press either.
+
+Suppression is the consumer's handler plus the event's default action, not propagation. Events still bubble, so an enclosing dialog or menu keeps seeing them. Every key but `Tab` has its default prevented — `Tab` is exempt so focus can still move off the button, which is the point of keeping it focusable.
+
+### Non-native element
+
+```tsx
+<Button
+  nativeButton={false}
+  render={<a href='/settings' />}
+>
+  Settings
+</Button>
+```
+
+## Props
+
+| Prop                    | Type                  | Default | Description                                                        |
+| ----------------------- | --------------------- | ------- | ------------------------------------------------------------------ |
+| `disabled`              | `boolean`             | `false` | Makes the button inert                                             |
+| `focusableWhenDisabled` | `boolean`             | `false` | Keeps a disabled button in the tab order                           |
+| `nativeButton`          | `boolean`             | `true`  | Whether the rendered element is a real `<button>`                  |
+| `render`                | `RenderPropOrElement` | —       | Renders a different element (see the shared `render` escape hatch) |
+
+Standard `<button>` attributes pass through. `type` defaults to `"button"` on a native button and is overridable.
+
+## Data Attributes
+
+| Attribute       | Description           |
+| --------------- | --------------------- |
+| `data-disabled` | Present when disabled |
+
+## ARIA
+
+- Native + disabled: the `disabled` attribute.
+- Native + `disabled` + `focusableWhenDisabled`: `aria-disabled="true"`, no `disabled` attribute.
+- `nativeButton={false}`: `role="button"`, `tabIndex={0}` (`-1` when disabled without `focusableWhenDisabled`, since an `<a href>` is tabbable on its own and dropping the attribute would leave it in the tab order), `aria-disabled` when disabled. `Enter` and `Space` activate it; `Enter` on a link is left to the browser so it does not fire twice.
diff --git a/packages/headless/src/primitives/button/button.test.tsx b/packages/headless/src/primitives/button/button.test.tsx
new file mode 100644
index 00000000000..e5080458eba
--- /dev/null
+++ b/packages/headless/src/primitives/button/button.test.tsx
@@ -0,0 +1,387 @@
+import { cleanup, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+
+import { axe } from '../../test-utils/axe';
+import { Button } from './index';
+
+afterEach(() => cleanup());
+
+describe('Button', () => {
+  describe('native button', () => {
+    it('renders a button with an explicit type', () => {
+      render(<Button>Save</Button>);
+
+      const button = screen.getByRole('button', { name: 'Save' });
+      expect(button.tagName).toBe('BUTTON');
+      expect(button).toHaveAttribute('type', 'button');
+    });
+
+    it('lets the consumer override the type', () => {
+      render(<Button type='submit'>Save</Button>);
+
+      expect(screen.getByRole('button', { name: 'Save' })).toHaveAttribute('type', 'submit');
+    });
+
+    it('calls onClick when enabled', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(<Button onClick={onClick}>Save</Button>);
+
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('forwards its ref', () => {
+      const ref = React.createRef<HTMLButtonElement>();
+      render(<Button ref={ref}>Save</Button>);
+
+      expect(ref.current).toBe(screen.getByRole('button', { name: 'Save' }));
+    });
+  });
+
+  describe('disabled', () => {
+    it('sets the native disabled attribute', () => {
+      render(<Button disabled>Save</Button>);
+
+      const button = screen.getByRole('button', { name: 'Save' });
+      expect(button).toBeDisabled();
+      expect(button).not.toHaveAttribute('aria-disabled');
+      expect(button).toHaveAttribute('data-disabled');
+    });
+
+    it('is not reachable by keyboard', async () => {
+      const user = userEvent.setup();
+      render(<Button disabled>Save</Button>);
+
+      await user.tab();
+
+      expect(screen.getByRole('button', { name: 'Save' })).not.toHaveFocus();
+    });
+  });
+
+  describe('focusableWhenDisabled', () => {
+    it('marks the button aria-disabled instead of disabled', () => {
+      render(
+        <Button
+          disabled
+          focusableWhenDisabled
+        >
+          Save
+        </Button>,
+      );
+
+      const button = screen.getByRole('button', { name: 'Save' });
+      expect(button).not.toBeDisabled();
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+      expect(button).toHaveAttribute('data-disabled');
+    });
+
+    it('stays reachable by keyboard', async () => {
+      const user = userEvent.setup();
+      render(
+        <Button
+          disabled
+          focusableWhenDisabled
+        >
+          Save
+        </Button>,
+      );
+
+      await user.tab();
+
+      expect(screen.getByRole('button', { name: 'Save' })).toHaveFocus();
+    });
+
+    it('keeps focus when it becomes disabled', () => {
+      const { rerender } = render(<Button focusableWhenDisabled>Save</Button>);
+      const button = screen.getByRole('button', { name: 'Save' });
+      button.focus();
+
+      rerender(
+        <Button
+          disabled
+          focusableWhenDisabled
+        >
+          Save
+        </Button>,
+      );
+
+      expect(button).toHaveFocus();
+    });
+
+    it('does not call onClick on click', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <Button
+          disabled
+          focusableWhenDisabled
+          onClick={onClick}
+        >
+          Save
+        </Button>,
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('does not call onClick on Enter or Space', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <Button
+          disabled
+          focusableWhenDisabled
+          onClick={onClick}
+        >
+          Save
+        </Button>,
+      );
+
+      screen.getByRole('button', { name: 'Save' }).focus();
+      await user.keyboard('{Enter}');
+      await user.keyboard(' ');
+
+      expect(onClick).not.toHaveBeenCalled();
+    });
+
+    it('does not submit the surrounding form', async () => {
+      const user = userEvent.setup();
+      const onSubmit = vi.fn((event: React.FormEvent) => event.preventDefault());
+      render(
+        <form onSubmit={onSubmit}>
+          <Button
+            type='submit'
+            disabled
+            focusableWhenDisabled
+          >
+            Save
+          </Button>
+        </form>,
+      );
+
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+
+      expect(onSubmit).not.toHaveBeenCalled();
+    });
+
+    it('can be tabbed past', async () => {
+      const user = userEvent.setup();
+      render(
+        <div>
+          <Button
+            disabled
+            focusableWhenDisabled
+          >
+            Save
+          </Button>
+          <input aria-label='After' />
+        </div>,
+      );
+
+      screen.getByRole('button', { name: 'Save' }).focus();
+      await user.tab();
+
+      expect(screen.getByRole('textbox', { name: 'After' })).toHaveFocus();
+    });
+
+    it('lets keys still reach an ancestor', async () => {
+      const user = userEvent.setup();
+      const onAncestorKeyDown = vi.fn();
+      render(
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- stands in for a dialog listening for Escape
+        <div onKeyDown={onAncestorKeyDown}>
+          <Button
+            disabled
+            focusableWhenDisabled
+          >
+            Save
+          </Button>
+        </div>,
+      );
+
+      screen.getByRole('button', { name: 'Save' }).focus();
+      await user.keyboard('{Escape}');
+
+      expect(onAncestorKeyDown).toHaveBeenCalled();
+    });
+
+    it('does not take focus on pointer interaction', async () => {
+      const user = userEvent.setup();
+      render(
+        <div>
+          <input aria-label='Name' />
+          <Button
+            disabled
+            focusableWhenDisabled
+          >
+            Save
+          </Button>
+        </div>,
+      );
+
+      const input = screen.getByRole('textbox', { name: 'Name' });
+      input.focus();
+      await user.click(screen.getByRole('button', { name: 'Save' }));
+
+      expect(input).toHaveFocus();
+    });
+  });
+
+  describe('non-native button', () => {
+    it('applies button semantics to the rendered element', () => {
+      render(
+        <Button
+          nativeButton={false}
+          render={<span />}
+        >
+          Save
+        </Button>,
+      );
+
+      const button = screen.getByRole('button', { name: 'Save' });
+      expect(button.tagName).toBe('SPAN');
+      expect(button).toHaveAttribute('tabindex', '0');
+      expect(button).not.toHaveAttribute('type');
+    });
+
+    it('activates on Enter and Space', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <Button
+          nativeButton={false}
+          render={<span />}
+          onClick={onClick}
+        >
+          Save
+        </Button>,
+      );
+
+      screen.getByRole('button', { name: 'Save' }).focus();
+      await user.keyboard('{Enter}');
+      await user.keyboard(' ');
+
+      expect(onClick).toHaveBeenCalledTimes(2);
+    });
+
+    it('activates a link once on Enter', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn((event: React.MouseEvent) => event.preventDefault());
+      render(
+        <Button
+          nativeButton={false}
+          // eslint-disable-next-line jsx-a11y/anchor-has-content -- the render element is a template; Button supplies the children
+          render={<a href='#target' />}
+          onClick={onClick}
+        >
+          Save
+        </Button>,
+      );
+
+      screen.getByRole('button', { name: 'Save' }).focus();
+      await user.keyboard('{Enter}');
+
+      expect(onClick).toHaveBeenCalledTimes(1);
+    });
+
+    it('drops out of the tab order when disabled', () => {
+      render(
+        <Button
+          nativeButton={false}
+          render={<span />}
+          disabled
+        >
+          Save
+        </Button>,
+      );
+
+      const button = screen.getByRole('button', { name: 'Save' });
+      expect(button).toHaveAttribute('tabindex', '-1');
+      expect(button).toHaveAttribute('aria-disabled', 'true');
+    });
+
+    // An anchor is tabbable on its own, so this needs the explicit `-1` rather than
+    // the absence of the attribute.
+    it('drops a disabled link out of the tab order', async () => {
+      const user = userEvent.setup();
+      render(
+        <div>
+          <Button
+            nativeButton={false}
+            // eslint-disable-next-line jsx-a11y/anchor-has-content -- the render element is a template; Button supplies the children
+            render={<a href='#target' />}
+            disabled
+          >
+            Save
+          </Button>
+          <input aria-label='After' />
+        </div>,
+      );
+
+      await user.tab();
+
+      expect(screen.getByRole('textbox', { name: 'After' })).toHaveFocus();
+    });
+
+    it('forwards a ref to the rendered element', () => {
+      const ref = React.createRef<HTMLAnchorElement>();
+      render(
+        <Button
+          nativeButton={false}
+          ref={ref}
+          // eslint-disable-next-line jsx-a11y/anchor-has-content -- the render element is a template; Button supplies the children
+          render={<a href='#target' />}
+        >
+          Save
+        </Button>,
+      );
+
+      expect(ref.current).toBe(screen.getByRole('button', { name: 'Save' }));
+    });
+
+    it('stays in the tab order when disabled and focusable', async () => {
+      const user = userEvent.setup();
+      const onClick = vi.fn();
+      render(
+        <Button
+          nativeButton={false}
+          render={<span />}
+          disabled
+          focusableWhenDisabled
+          onClick={onClick}
+        >
+          Save
+        </Button>,
+      );
+
+      await user.tab();
+      const button = screen.getByRole('button', { name: 'Save' });
+      expect(button).toHaveFocus();
+
+      await user.keyboard('{Enter}');
+      expect(onClick).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('accessibility', () => {
+    it('has no axe violations when disabled and focusable', async () => {
+      const { container } = render(
+        <Button
+          disabled
+          focusableWhenDisabled
+        >
+          Save
+        </Button>,
+      );
+
+      const results = await axe(container);
+      expect(results.violations).toEqual([]);
+    });
+  });
+});
diff --git a/packages/headless/src/primitives/button/button.tsx b/packages/headless/src/primitives/button/button.tsx
new file mode 100644
index 00000000000..0713ad38feb
--- /dev/null
+++ b/packages/headless/src/primitives/button/button.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import React from 'react';
+
+import { type ComponentProps, mergeProps, useRender } from '../../utils';
+
+/** Props for {@link Button}. */
+export interface ButtonProps extends ComponentProps<'button'> {
+  /**
+   * Keeps the button in the tab order while `disabled`. A button that disables itself
+   * mid-interaction — while a form submits, say — otherwise drops focus to the body and
+   * the user loses their place on the page. The button is marked `aria-disabled` rather
+   * than `disabled`, and stays inert to clicks and keyboard activation.
+   * @default false
+   */
+  focusableWhenDisabled?: boolean;
+  /**
+   * Whether the rendered element is a native `<button>`. Set to `false` alongside a
+   * `render` prop returning anything else, so the role, tab order, and Enter/Space
+   * activation a `<button>` provides natively are applied instead.
+   * @default true
+   */
+  nativeButton?: boolean;
+}
+
+function isLink(element: HTMLElement): boolean {
+  return element.tagName === 'A' && element.hasAttribute('href');
+}
+
+function preventDefault(event: React.SyntheticEvent): void {
+  event.preventDefault();
+}
+
+/** Replaces the consumer's handler while disabled, so theirs never runs. */
+function noop(): void {}
+
+// Every key but `Tab`, so focus can still move off the button — the whole point of keeping
+// it focusable. Propagation is deliberately left alone: an enclosing dialog or menu still
+// sees the key.
+function preventDefaultUnlessTab(event: React.KeyboardEvent): void {
+  if (event.key !== 'Tab') {
+    event.preventDefault();
+  }
+}
+
+/**
+ * A button with the disabled behaviour a native `<button>` cannot express: staying
+ * focusable while inert, and behaving like a button on elements that aren't one.
+ *
+ * @example
+ * // Focus survives the button disabling itself while the form submits
+ * <Button disabled={submitting} focusableWhenDisabled type='submit'>Save</Button>
+ *
+ * @example
+ * // Button semantics on a link
+ * <Button nativeButton={false} render={<a href='/settings' />}>Settings</Button>
+ */
+// `HTMLElement` rather than `HTMLButtonElement`: `nativeButton={false}` renders an anchor or
+// a span, and the ref has to accept one.
+export const Button = React.forwardRef<HTMLElement, ButtonProps>(function Button(props, ref) {
+  const { render, disabled = false, focusableWhenDisabled = false, nativeButton = true, ...otherProps } = props;
+
+  // The `disabled` attribute is what makes a native button inert, but it also takes the
+  // button out of the tab order — the one thing `focusableWhenDisabled` exists to avoid.
+  const nativelyDisabled = nativeButton && !focusableWhenDisabled;
+
+  const defaultProps: Record<string, unknown> = nativeButton
+    ? { type: 'button', disabled: nativelyDisabled ? disabled : undefined }
+    : {
+        role: 'button',
+        // `-1` rather than dropping the attribute: an `<a href>` is tabbable on its own,
+        // so omitting it would leave a disabled link in the tab order.
+        tabIndex: disabled && !focusableWhenDisabled ? -1 : 0,
+        onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {
+          if (event.key === ' ') {
+            // Space scrolls the page on anything that is not a native button.
+            event.preventDefault();
+          } else if (event.key === 'Enter' && !isLink(event.currentTarget)) {
+            event.currentTarget.click();
+          }
+        },
+        onKeyUp: (event: React.KeyboardEvent<HTMLElement>) => {
+          if (event.key === ' ') {
+            event.currentTarget.click();
+          }
+        },
+      };
+
+  if (!nativelyDisabled) {
+    defaultProps['aria-disabled'] = disabled || undefined;
+  }
+
+  const merged = mergeProps<'button'>(defaultProps, otherProps);
+
+  if (disabled) {
+    // Without the `disabled` attribute the element still receives events, so they are
+    // suppressed here. These overwrite rather than chain: `mergeProps` runs the consumer's
+    // handler after ours, and a disabled button must not run it at all.
+    merged.onClick = preventDefault;
+    merged.onMouseDown = noop;
+    merged.onKeyUp = noop;
+    // Blocking the pointer press is what keeps focus on whatever currently holds it. It has
+    // to be `pointerdown` rather than `mousedown` — preventing that one does not stop focus.
+    merged.onPointerDown = preventDefault;
+    // Only a focusable disabled button needs its keys neutered; a natively disabled one
+    // never receives them.
+    merged.onKeyDown = focusableWhenDisabled ? preventDefaultUnlessTab : noop;
+  }
+
+  return useRender({
+    defaultTagName: 'button',
+    render,
+    ref,
+    state: { disabled },
+    stateAttributesMapping: {
+      disabled: (v: boolean) => (v ? { 'data-disabled': '' } : null),
+    },
+    props: merged,
+  });
+});
diff --git a/packages/headless/src/primitives/button/index.ts b/packages/headless/src/primitives/button/index.ts
new file mode 100644
index 00000000000..e43c452992b
--- /dev/null
+++ b/packages/headless/src/primitives/button/index.ts
@@ -0,0 +1 @@
+export { Button, type ButtonProps } from './button';
diff --git a/packages/headless/vite.config.ts b/packages/headless/vite.config.ts
index 23382fe0e80..70a8fcb5adf 100644
--- a/packages/headless/vite.config.ts
+++ b/packages/headless/vite.config.ts
@@ -13,6 +13,7 @@ export default defineConfig({
     lib: {
       entry: {
         'primitives/accordion/index': 'src/primitives/accordion/index.ts',
+        'primitives/button/index': 'src/primitives/button/index.ts',
         'primitives/tabs/index': 'src/primitives/tabs/index.ts',
         'primitives/tooltip/index': 'src/primitives/tooltip/index.ts',
         'primitives/popover/index': 'src/primitives/popover/index.ts',