How to generate table of contents for *.mdx files

[grelas]

Summary

I'm trying to render a table of contents when using MDX, yet I'm not sure if this is just a limitation? According to the following: https://storybook.js.org/docs/writing-docs/autodocs#with-mdx-1

If you're writing unattached documentation using MDX, you cannot customize the table of contents primarily due to the lack of support for defining parameters based on the current implementation. As a result, the table of contents will always revert to the default configuration provided globally.

This implies that it should work, just that you can't customize it, yet I don't see an auto-generated TOC? What am I missing?

Button.mdx

import { Canvas, Meta } from "@storybook/blocks";
import * as ButtonStories from "./Button.stories";

<Meta of={ButtonStories} />

# Button

Test

## Primary

<Canvas of={ButtonStories.Primary} />

## Secondary

<Canvas of={ButtonStories.Secondary} />

## Large

<Canvas of={ButtonStories.Large} />

Button.stories.ts

import type { Meta, StoryObj } from "@storybook/react";
import { fn } from "@storybook/test";
import { Button } from "./Button";

const meta = {
  title: "Components/Button",
  component: Button,
  parameters: {
    layout: "centered",
  },
  argTypes: {
    backgroundColor: { control: "color" },
  },
  args: { onClick: fn() },
} satisfies Meta<typeof Button>;

export default meta;
type Story = StoryObj<typeof meta>;

export const Primary: Story = {
  args: {
    primary: true,
    label: "Button",
  },
};

export const Secondary: Story = {
  args: {
    label: "Button",
  },
};

export const Large: Story = {
  args: {
    size: "large",
    label: "Button",
  },
};

export const Small: Story = {
  args: {
    size: "small",
    label: "Button",
  },
};

Additional information

main.ts

import type { StorybookConfig } from "@storybook/react-vite";

const config: StorybookConfig = {
  staticDirs: ["../public"],
  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
  addons: [
    "@storybook/addon-onboarding",
    "@storybook/addon-essentials",
    "@chromatic-com/storybook",
    "@storybook/addon-interactions",
  ],
  framework: {
    name: "@storybook/react-vite",
    options: {},
  },
  docs: {
    //👇 See the table below for the list of supported options
    defaultName: "Documentation",
  },
};
export default config;

preview.ts

import type { Preview } from "@storybook/react";
import "./global.css";

const preview: Preview = {
  parameters: {
    docs: {
      toc: true,
    },
  },
};

export default preview;

---

"@storybook/addon-essentials": "^8.5.6",
"@storybook/addon-interactions": "^8.5.6",
"@storybook/addon-onboarding": "^8.5.6",
"@storybook/blocks": "^8.5.6",
"@storybook/react": "^8.5.6",
"@storybook/react-vite": "^8.5.6",
"@storybook/test": "^8.5.6",
"@types/react": "^19.0.8",
"@types/react-dom": "^19.0.3"

Create a reproduction

No response