From 33176192adcbbcc06382a0b6cf4a1122242da6c3 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 2 Apr 2024 12:38:54 -0600
Subject: [PATCH 1/5] Add docs for story tags

- API reference
- Guide
- CLI options
---
 docs/api/cli-options.md      |  9 +++-
 docs/api/main-config-tags.md | 40 +++++++++++++++
 docs/api/main-config.md      |  1 +
 docs/toc.js                  | 12 ++++-
 docs/writing-stories/tags.md | 99 ++++++++++++++++++++++++++++++++++++
 5 files changed, 158 insertions(+), 3 deletions(-)
 create mode 100644 docs/api/main-config-tags.md
 create mode 100644 docs/writing-stories/tags.md

diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 3aa9f0a3f0a1..39b366429daf 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -1,5 +1,6 @@
 ---
 title: 'CLI options'
+hideRendererSelector: true
 ---
 
 The Storybook command line interface (CLI) is the main tool you use to build and develop Storybook.
@@ -46,9 +47,11 @@ Options include:
 | `--no-open`                     | Do not open Storybook automatically in the browser<br/>`storybook dev --no-open`                                                                                          |
 | `--quiet`                       | Suppress verbose build output<br/>`storybook dev --quiet`                                                                                                                 |
 | `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook dev --debug-webpack`                                                                           |
-| `--stats-json`          | Write  stats JSON to disk<br/>`storybook dev ---stats-json /tmp/stats`<br/>NOTE: only works for webpack.                                                                              |
+| `--stats-json`                  | Write stats JSON to disk<br/>`storybook dev ---stats-json /tmp/stats`<br/>NOTE: only works for webpack.                                                                   |
 | `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`storybook dev --docs` |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook dev --disable-telemetry`                                             |
+| `--tags`                        | Select which [story tags](../writing-stories/tags.md) to include. Accepts a comma-seperated string.<br/>`storybook dev --tags "dev,test"`                                 |
+| `--exclude-tags`                | Select which [story tags](../writing-stories/tags.md) to exclude. Accepts a comma-seperated string.<br/>`storybook dev --tags "docs, test"`                               |
 
 <Callout variant="warning" id="static-dir-deprecation">
 
@@ -75,10 +78,12 @@ Options include:
 | `--loglevel [level]`            | Controls level of logging during build.<br/> Available options: `silly`, `verbose`, `info` (default), `warn`, `error`, `silent`<br/>`storybook build --loglevel warn`                                 |
 | `--quiet`                       | Suppress verbose build output<br/>`storybook build --quiet`                                                                                                                                           |
 | `--debug-webpack`               | Display final webpack configurations for debugging purposes<br/>`storybook build --debug-webpack`                                                                                                     |
-| `---stats-json`          | Write stats JSON to disk<br/>`storybook build -stats-json /my-storybook/-stats`                                                                                               |
+| `---stats-json`                 | Write stats JSON to disk<br/>`storybook build -stats-json /my-storybook/-stats`                                                                                                                       |
 | `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs`                           |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                                                      |
 | `--test`                        | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test` |
+| `--tags`                        | Select which [story tags](../writing-stories/tags.md) to include. Accepts a comma-seperated string.<br/>`storybook dev --tags "dev,test"`                                                             |
+| `--exclude-tags`                | Select which [story tags](../writing-stories/tags.md) to exclude. Accepts a comma-seperated string.<br/>`storybook dev --tags "docs, test"`                                                           |
 
 <!-- Re-read this for accuracy -->
 
diff --git a/docs/api/main-config-tags.md b/docs/api/main-config-tags.md
new file mode 100644
index 000000000000..cb593d36afb5
--- /dev/null
+++ b/docs/api/main-config-tags.md
@@ -0,0 +1,40 @@
+---
+title: 'tags'
+hideRendererSelector: true
+---
+
+Parent: [main.js|ts configuration](./main-config.md)
+
+Type: `{ [key: string]: { description?: string } }`
+
+[Tags](../writing-stories/tags.md) allow you to control which stories are included in your Storybook. They are defined in the `tags` property of the Storybook configuration. Then they can be [applied to stories](../writing-stories/tags.md#tagging-stories) at the project, component, and story levels using the `tags` array.
+
+## Default tags
+
+The following tags are available by default in your project:
+
+```js
+{
+  dev: { description: 'Rendered in the Storybook UI, but only in development mode. They do not appear in the sidebar in production mode.' },
+  docs: { description: 'Rendered in the Storybook UI, but only in the docs page. They do not appear in the sidebar.' },
+  test: { description: 'Not rendered in the Storybook UI, in either development or production mode.' },
+}
+```
+
+## Custom tags
+
+You can [define your own tags](../writing-stories/tags.md#custom-tags). When doing so, the key is the tag name, and the value is an object with an optional `description` property.
+
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/<your-framework>';
+
+const config: StorybookConfig = {
+  // ...rest of config
+  tags: {
+    experimental: { description: 'Stories for experimental components or features' },
+  },
+};
+
+export default config;
+```
diff --git a/docs/api/main-config.md b/docs/api/main-config.md
index a9013268e45c..e347bc355b5f 100644
--- a/docs/api/main-config.md
+++ b/docs/api/main-config.md
@@ -44,6 +44,7 @@ An object to configure Storybook containing the following properties:
 - [`refs`](./main-config-refs.md)
 - [`staticDirs`](./main-config-static-dirs.md)
 - [`swc`](./main-config-swc.md)
+- [`tags`](./main-config-tags.md)
 - [`typescript`](./main-config-typescript.md)
 - [`viteFinal`](./main-config-vite-final.md)
 - [`webpackFinal`](./main-config-webpack-final.md)
diff --git a/docs/toc.js b/docs/toc.js
index a4d3e85cf6be..7f3b62cbe9e8 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -136,6 +136,11 @@ module.exports = {
           title: 'Loaders',
           type: 'link',
         },
+        {
+          pathSegment: 'tags',
+          title: 'Tags',
+          type: 'link',
+        },
         {
           pathSegment: 'naming-components-and-hierarchy',
           title: 'Naming components and hierarchy',
@@ -611,11 +616,16 @@ module.exports = {
               pathSegment: 'main-config-static-dirs',
               type: 'link',
             },
-             {
+            {
               title: 'swc',
               pathSegment: 'main-config-swc',
               type: 'link',
             },
+            {
+              title: 'tags',
+              pathSegment: 'main-config-tags',
+              type: 'link',
+            },
             {
               title: 'typescript',
               pathSegment: 'main-config-typescript',
diff --git a/docs/writing-stories/tags.md b/docs/writing-stories/tags.md
new file mode 100644
index 000000000000..174cfab0183a
--- /dev/null
+++ b/docs/writing-stories/tags.md
@@ -0,0 +1,99 @@
+---
+title: 'Tags'
+---
+
+Tags allow you to control which stories are included in your Storybook.
+
+## Default tags
+
+By default, the following tags are available in your project:
+
+- `dev`: Stories tagged with `dev` are rendered in the Storybook UI, but only in development mode. They do not appear in the sidebar in [production mode](../sharing/publish-storybook.md#build-storybook-as-a-static-web-application).
+- `docs`: Stories tagged with `docs` are rendered in the Storybook UI, but only in the [docs page](../writing-docs/autodocs.md). They do not appear in the sidebar.
+- `test`: Stories tagged with `test` are not rendered in the Storybook UI, in either development or production mode.
+
+## Custom tags
+
+You can define your own tags by adding them to the [`tags` property](../api/main-config-tags.md) in your `main.js|ts` file. For example:
+
+```ts
+// .storybook/main.ts
+import { StorybookConfig } from '@storybook/<your-framework>';
+
+const config: StorybookConfig = {
+  // ...rest of config
+  tags: {
+    experimental: { description: 'Stories for experimental components or features' },
+  },
+};
+
+export default config;
+```
+
+## Tagging stories
+
+You tag stories by defining a `tags` array in the story or meta definitions:
+
+```ts
+// Button.stories.ts
+import { Meta, StoryObj } from '@storybook/<your-framework>';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Stories in this file will only be included for development mode, not production
+  tags: ['dev'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const InternalStory: Story = {
+  /**
+   * 👇 This story inherits the tags from `meta` and defines its own,
+   *    making the applied tags `['dev', 'test']`.
+   *    It will not be included in the UI, only for testing environments
+   */
+  tags: ['test'],
+};
+```
+
+If you want to add tags to all stories in your project, you can apply them in your `preview.js|ts` file:
+
+```ts
+// .storybook/preview.ts
+import { Preview } from '@storybook/<your-framework>';
+
+const preview: Preview = {
+  // ...rest of preview
+  tags: ['dev'],
+};
+
+export default preview;
+```
+
+### Removing tags
+
+To remove a tag from a story, prefix it with `!`. For example:
+
+```ts
+// Button.stories.ts
+import { Meta, StoryObj } from '@storybook/<your-framework>';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Stories in this file will only be included for development mode, not production
+  tags: ['dev'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const InternalStory: Story = {
+  // 👇 Remove the inherited `dev` tag by using the `!` prefix
+  tags: ['!dev'],
+};
+```

From 64c67b4dbb85e2ad63d76f1599a905d2b39e4a47 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Mon, 6 May 2024 16:32:58 -0600
Subject: [PATCH 2/5] Revise tags docs

- Document new API
- Add examples
- Remove `main-config-tags`
- Remove `--tags` and `--exclude-tags` CLI flags
- Remove `autodocs: true | false | 'tag'`
- Remove old snippets
---
 docs/api/cli-options.md                       |   4 -
 docs/api/main-config-tags.md                  |  40 -----
 docs/api/main-config.md                       |   1 -
 .../angular/button-story-auto-docs.ts.mdx     |  33 ----
 .../storybook-auto-docs-full-config.js.mdx    |   1 -
 .../storybook-auto-docs-full-config.ts.mdx    |   1 -
 .../react/button-story-auto-docs.js.mdx       |  28 ----
 .../react/button-story-auto-docs.ts-4-9.mdx   |  33 ----
 .../react/button-story-auto-docs.ts.mdx       |  33 ----
 .../solid/button-story-auto-docs.js.mdx       |  28 ----
 .../solid/button-story-auto-docs.ts-4-9.mdx   |  33 ----
 .../solid/button-story-auto-docs.ts.mdx       |  33 ----
 .../svelte/button-story-auto-docs.js.mdx      |  28 ----
 .../svelte/button-story-auto-docs.ts-4-9.mdx  |  33 ----
 .../svelte/button-story-auto-docs.ts.mdx      |  33 ----
 .../vue/button-story-auto-docs.js.mdx         |  28 ----
 .../vue/button-story-auto-docs.ts-4-9.mdx     |  33 ----
 .../vue/button-story-auto-docs.ts.mdx         |  33 ----
 .../button-story-auto-docs.js.mdx             |  26 ---
 .../button-story-auto-docs.ts.mdx             |  31 ----
 docs/toc.js                                   |   5 -
 docs/writing-docs/autodocs.md                 | 100 +++++++++---
 docs/writing-stories/tags.md                  | 152 +++++++++++++-----
 23 files changed, 185 insertions(+), 585 deletions(-)
 delete mode 100644 docs/api/main-config-tags.md
 delete mode 100644 docs/snippets/angular/button-story-auto-docs.ts.mdx
 delete mode 100644 docs/snippets/react/button-story-auto-docs.js.mdx
 delete mode 100644 docs/snippets/react/button-story-auto-docs.ts-4-9.mdx
 delete mode 100644 docs/snippets/react/button-story-auto-docs.ts.mdx
 delete mode 100644 docs/snippets/solid/button-story-auto-docs.js.mdx
 delete mode 100644 docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
 delete mode 100644 docs/snippets/solid/button-story-auto-docs.ts.mdx
 delete mode 100644 docs/snippets/svelte/button-story-auto-docs.js.mdx
 delete mode 100644 docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx
 delete mode 100644 docs/snippets/svelte/button-story-auto-docs.ts.mdx
 delete mode 100644 docs/snippets/vue/button-story-auto-docs.js.mdx
 delete mode 100644 docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx
 delete mode 100644 docs/snippets/vue/button-story-auto-docs.ts.mdx
 delete mode 100644 docs/snippets/web-components/button-story-auto-docs.js.mdx
 delete mode 100644 docs/snippets/web-components/button-story-auto-docs.ts.mdx

diff --git a/docs/api/cli-options.md b/docs/api/cli-options.md
index 39b366429daf..58aef51a3787 100644
--- a/docs/api/cli-options.md
+++ b/docs/api/cli-options.md
@@ -50,8 +50,6 @@ Options include:
 | `--stats-json`                  | Write stats JSON to disk<br/>`storybook dev ---stats-json /tmp/stats`<br/>NOTE: only works for webpack.                                                                   |
 | `--docs`                        | Starts Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#preview-storybooks-documentation)<br/>`storybook dev --docs` |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md)<br/>`storybook dev --disable-telemetry`                                             |
-| `--tags`                        | Select which [story tags](../writing-stories/tags.md) to include. Accepts a comma-seperated string.<br/>`storybook dev --tags "dev,test"`                                 |
-| `--exclude-tags`                | Select which [story tags](../writing-stories/tags.md) to exclude. Accepts a comma-seperated string.<br/>`storybook dev --tags "docs, test"`                               |
 
 <Callout variant="warning" id="static-dir-deprecation">
 
@@ -82,8 +80,6 @@ Options include:
 | `--docs`                        | Builds Storybook in documentation mode. Learn more about it in [here](../writing-docs/build-documentation.md#publish-storybooks-documentation)<br/>`storybook build --docs`                           |
 | `--disable-telemetry`           | Disables Storybook's telemetry. Learn more about it [here](../configure/telemetry.md).<br/>`storybook build --disable-telemetry`                                                                      |
 | `--test`                        | Optimize Storybook's production build for performance and tests by removing unnecessary features with the `test` option. Learn more [here](../api/main-config-build.md).<br/>`storybook build --test` |
-| `--tags`                        | Select which [story tags](../writing-stories/tags.md) to include. Accepts a comma-seperated string.<br/>`storybook dev --tags "dev,test"`                                                             |
-| `--exclude-tags`                | Select which [story tags](../writing-stories/tags.md) to exclude. Accepts a comma-seperated string.<br/>`storybook dev --tags "docs, test"`                                                           |
 
 <!-- Re-read this for accuracy -->
 
diff --git a/docs/api/main-config-tags.md b/docs/api/main-config-tags.md
deleted file mode 100644
index cb593d36afb5..000000000000
--- a/docs/api/main-config-tags.md
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: 'tags'
-hideRendererSelector: true
----
-
-Parent: [main.js|ts configuration](./main-config.md)
-
-Type: `{ [key: string]: { description?: string } }`
-
-[Tags](../writing-stories/tags.md) allow you to control which stories are included in your Storybook. They are defined in the `tags` property of the Storybook configuration. Then they can be [applied to stories](../writing-stories/tags.md#tagging-stories) at the project, component, and story levels using the `tags` array.
-
-## Default tags
-
-The following tags are available by default in your project:
-
-```js
-{
-  dev: { description: 'Rendered in the Storybook UI, but only in development mode. They do not appear in the sidebar in production mode.' },
-  docs: { description: 'Rendered in the Storybook UI, but only in the docs page. They do not appear in the sidebar.' },
-  test: { description: 'Not rendered in the Storybook UI, in either development or production mode.' },
-}
-```
-
-## Custom tags
-
-You can [define your own tags](../writing-stories/tags.md#custom-tags). When doing so, the key is the tag name, and the value is an object with an optional `description` property.
-
-```ts
-// .storybook/main.ts
-import { StorybookConfig } from '@storybook/<your-framework>';
-
-const config: StorybookConfig = {
-  // ...rest of config
-  tags: {
-    experimental: { description: 'Stories for experimental components or features' },
-  },
-};
-
-export default config;
-```
diff --git a/docs/api/main-config.md b/docs/api/main-config.md
index e347bc355b5f..a9013268e45c 100644
--- a/docs/api/main-config.md
+++ b/docs/api/main-config.md
@@ -44,7 +44,6 @@ An object to configure Storybook containing the following properties:
 - [`refs`](./main-config-refs.md)
 - [`staticDirs`](./main-config-static-dirs.md)
 - [`swc`](./main-config-swc.md)
-- [`tags`](./main-config-tags.md)
 - [`typescript`](./main-config-typescript.md)
 - [`viteFinal`](./main-config-vite-final.md)
 - [`webpackFinal`](./main-config-webpack-final.md)
diff --git a/docs/snippets/angular/button-story-auto-docs.ts.mdx b/docs/snippets/angular/button-story-auto-docs.ts.mdx
deleted file mode 100644
index d0b433899e96..000000000000
--- a/docs/snippets/angular/button-story-auto-docs.ts.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/angular';
-
-import { Button } from './button.component';
-
-const meta: Meta<Button> = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
index 3ff19b4d7b83..a186d08bc021 100644
--- a/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
+++ b/docs/snippets/common/storybook-auto-docs-full-config.js.mdx
@@ -8,7 +8,6 @@ export default {
   addons: ['@storybook/addon-essentials'],
   docs: {
     //👇 See the table below for the list of supported options
-    autodocs: 'tag',
     defaultName: 'Documentation',
   },
 };
diff --git a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx b/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
index 2c1eb1bac113..50a44e682f07 100644
--- a/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
+++ b/docs/snippets/common/storybook-auto-docs-full-config.ts.mdx
@@ -10,7 +10,6 @@ const config: StorybookConfig = {
   addons: ['@storybook/addon-essentials'],
   docs: {
     //👇 See the table below for the list of supported options
-    autodocs: 'tag',
     defaultName: 'Documentation',
   },
 };
diff --git a/docs/snippets/react/button-story-auto-docs.js.mdx b/docs/snippets/react/button-story-auto-docs.js.mdx
deleted file mode 100644
index b91d82f70638..000000000000
--- a/docs/snippets/react/button-story-auto-docs.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// Button.stories.js
-
-import { Button } from './Button';
-
-export default {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/react/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/react/button-story-auto-docs.ts-4-9.mdx
deleted file mode 100644
index 14f45d47dc56..000000000000
--- a/docs/snippets/react/button-story-auto-docs.ts-4-9.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Button.stories.ts|tsx
-
-import type { Meta } from '@storybook/react';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} 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: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/react/button-story-auto-docs.ts.mdx b/docs/snippets/react/button-story-auto-docs.ts.mdx
deleted file mode 100644
index 6d9974b9d1d0..000000000000
--- a/docs/snippets/react/button-story-auto-docs.ts.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Button.stories.ts|tsx
-
-import type { Meta } from '@storybook/react';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/solid/button-story-auto-docs.js.mdx b/docs/snippets/solid/button-story-auto-docs.js.mdx
deleted file mode 100644
index b91d82f70638..000000000000
--- a/docs/snippets/solid/button-story-auto-docs.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// Button.stories.js
-
-import { Button } from './Button';
-
-export default {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
deleted file mode 100644
index 164bb2d6617a..000000000000
--- a/docs/snippets/solid/button-story-auto-docs.ts-4-9.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```tsx
-// Button.stories.ts|tsx
-
-import type { Meta } from 'storybook-solidjs';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} 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: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/solid/button-story-auto-docs.ts.mdx b/docs/snippets/solid/button-story-auto-docs.ts.mdx
deleted file mode 100644
index 95eee64f8b77..000000000000
--- a/docs/snippets/solid/button-story-auto-docs.ts.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```tsx
-// Button.stories.ts|tsx
-
-import type { Meta } from 'storybook-solidjs';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/svelte/button-story-auto-docs.js.mdx b/docs/snippets/svelte/button-story-auto-docs.js.mdx
deleted file mode 100644
index b4bed93087ce..000000000000
--- a/docs/snippets/svelte/button-story-auto-docs.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.svelte';
-
-export default {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx
deleted file mode 100644
index a15d00516058..000000000000
--- a/docs/snippets/svelte/button-story-auto-docs.ts-4-9.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-import Button from './Button.svelte';
-
-const meta = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} 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: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/svelte/button-story-auto-docs.ts.mdx b/docs/snippets/svelte/button-story-auto-docs.ts.mdx
deleted file mode 100644
index 26248d745aff..000000000000
--- a/docs/snippets/svelte/button-story-auto-docs.ts.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/svelte';
-
-import Button from './Button.svelte';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-auto-docs.js.mdx b/docs/snippets/vue/button-story-auto-docs.js.mdx
deleted file mode 100644
index 3eeb837b4db7..000000000000
--- a/docs/snippets/vue/button-story-auto-docs.js.mdx
+++ /dev/null
@@ -1,28 +0,0 @@
-```js
-// Button.stories.js
-
-import Button from './Button.vue';
-
-export default {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx b/docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx
deleted file mode 100644
index 75f31fd78fa1..000000000000
--- a/docs/snippets/vue/button-story-auto-docs.ts-4-9.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Button from './Button.vue';
-
-const meta = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} 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: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/vue/button-story-auto-docs.ts.mdx b/docs/snippets/vue/button-story-auto-docs.ts.mdx
deleted file mode 100644
index 388b6a21d49b..000000000000
--- a/docs/snippets/vue/button-story-auto-docs.ts.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Button from './Button.vue';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/web-components/button-story-auto-docs.js.mdx b/docs/snippets/web-components/button-story-auto-docs.js.mdx
deleted file mode 100644
index c45b64d54fde..000000000000
--- a/docs/snippets/web-components/button-story-auto-docs.js.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-```js
-// Button.stories.js
-
-export default {
-  component: 'custom-button',
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/snippets/web-components/button-story-auto-docs.ts.mdx b/docs/snippets/web-components/button-story-auto-docs.ts.mdx
deleted file mode 100644
index 34d74da947b1..000000000000
--- a/docs/snippets/web-components/button-story-auto-docs.ts.mdx
+++ /dev/null
@@ -1,31 +0,0 @@
-```ts
-// Button.stories.ts
-
-import type { Meta, StoryObj } from '@storybook/web-components';
-
-const meta: Meta = {
-  component: 'custom-button',
-  //👇 Enables auto-generated documentation for the component story
-  tags: ['autodocs'],
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    ...Primary.args,
-    primary: false,
-  },
-};
-```
diff --git a/docs/toc.js b/docs/toc.js
index 7f3b62cbe9e8..9b2a9f64b510 100644
--- a/docs/toc.js
+++ b/docs/toc.js
@@ -621,11 +621,6 @@ module.exports = {
               pathSegment: 'main-config-swc',
               type: 'link',
             },
-            {
-              title: 'tags',
-              pathSegment: 'main-config-tags',
-              type: 'link',
-            },
             {
               title: 'typescript',
               pathSegment: 'main-config-typescript',
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index cad2b6e901d4..42ac5bc20dea 100644
--- a/docs/writing-docs/autodocs.md
+++ b/docs/writing-docs/autodocs.md
@@ -6,35 +6,86 @@ title: 'Automatic documentation and Storybook'
 
 Storybook Autodocs is a powerful tool that can help you quickly generate comprehensive documentation for your UI components. By leveraging Autodocs, you're transforming your stories into living documentation which can be further extended with [MDX](./mdx.md) and [Doc Blocks](./doc-blocks.md) to provide a clear and concise understanding of your components' functionality.
 
-## Setup automated documentation
+Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/arg-types.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar.
 
-To enable auto-generated documentation for your stories, you'll need to add the `tags` configuration property to the story's default export. For example:
+![Storybook autodocs](./autodocs.png)
 
-<!-- prettier-ignore-start -->
+## Set up automated documentation
 
-<CodeSnippets
-  paths={[
-    'react/button-story-auto-docs.js.mdx',
-    'react/button-story-auto-docs.ts.mdx',
-    'vue/button-story-auto-docs.js.mdx',
-    'vue/button-story-auto-docs.ts.mdx',
-    'angular/button-story-auto-docs.ts.mdx',
-    'svelte/button-story-auto-docs.js.mdx',
-    'svelte/button-story-auto-docs.ts.mdx',
-    'web-components/button-story-auto-docs.js.mdx',
-    'web-components/button-story-auto-docs.ts.mdx',
-  ]}
-/>
+Autodocs is configured through [tags](../writing-stories/tags.md). If a [CSF](../api/csf.md) file contains at least one story tagged with `autodocs`, then a documentation page will be generated for that component.
 
-<!-- prettier-ignore-end -->
+To enable automatic documentation for all stories in a project, add it to `tags` in your `.storybook/preview.js|ts` file:
 
-![Storybook autodocs](./autodocs.png)
+```ts
+// .storybook/preview.ts
+import type { Preview } from '@storybook/your-framework';
+
+const preview: Preview = {
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+};
+
+export default preview;
+```
+
+You can also enable it at the component (or story) level:
+
+```ts
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```
+
+You can disable auto docs for a particular component by [removing the tag](../writing-stories/tags.md#removing-tags):
+
+```ts
+// Page.stories.ts
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Page } from './Page';
+
+const meta = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+} satisfies Meta<typeof Page>;
+export default meta;
+```
+
+Similarly, you can exclude a particular story from the auto docs page, by removing the tag:
+
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
 
-Once the story loads, Storybook infers the relevant metadata (e.g., [`args`](../writing-stories/args.md), [`argTypes`](../api/arg-types.md), [`parameters`](../writing-stories/parameters.md)) and automatically generates a documentation page with this information positioned at the root-level of your component tree in the sidebar.
+export const UndocumentedStory = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
 
 ### Configure
 
-By default, Storybook offers zero-config support for documentation and automatically sets up a documentation page for each story enabled via the `tags` configuration property. However, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts|cjs`) and provide additional options to control how documentation gets created. Listed below are the available options and examples of how to use them.
+In addition to enabling the feature with `tags`, you can extend your Storybook configuration file (i.e., `.storybook/main.js|ts|cjs`) and provide additional options to control how documentation gets created. Listed below are the available options and examples of how to use them.
 
 <!-- prettier-ignore-start -->
 
@@ -47,10 +98,9 @@ By default, Storybook offers zero-config support for documentation and automatic
 
 <!-- prettier-ignore-end -->
 
-| Option        | Description                                                                                                                                                                                                                                                                                                              |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `autodocs`    | Configures auto-generated documentation pages. Available options: `true`, `false`,`tag` (default). `true`/`false` enable/disable autodocs globally. `tag` allows you to opt in per component by adding the `tags: ['autodocs']` annotation in the component's default export. <br/> Default: `docs: { autodocs: 'tag' }` |
-| `defaultName` | Renames the auto-generated documentation page<br/> Default: `docs: { defaultName: 'Documentation' }`                                                                                                                                                                                                                     |
+| Option        | Description                                                                                          |
+| ------------- | ---------------------------------------------------------------------------------------------------- |
+| `defaultName` | Renames the auto-generated documentation page<br/> Default: `docs: { defaultName: 'Documentation' }` |
 
 ### Write a custom template
 
@@ -134,7 +184,7 @@ Storybook's auto-generated documentation pages can be quite long and difficult t
 By default, the table of contents on the documentation page will only show the `h3` headings that are automatically generated. However, if you want to customize the table of contents, you can add more parameters to the `toc` property. The following options and examples of how to use them are available.
 
 | Option                | Description                                                                                                                                                                                                     |
-| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `contentsSelector`    | Defines the container's CSS selector for search for the headings <br/> `toc: { contentsSelector: '.sbdocs-content' }`                                                                                           |
 | `disable`             | Hides the table of contents for the documentation pages <br/> `toc: { disable: true }`                                                                                                                          |
 | `headingSelector`     | Defines the list of headings to feature in the table of contents <br/> `toc: { headingSelector: 'h1, h2, h3' }`                                                                                                 |
diff --git a/docs/writing-stories/tags.md b/docs/writing-stories/tags.md
index 174cfab0183a..e60c82ecf48e 100644
--- a/docs/writing-stories/tags.md
+++ b/docs/writing-stories/tags.md
@@ -2,98 +2,166 @@
 title: 'Tags'
 ---
 
-Tags allow you to control which stories are included in your Storybook.
+Tags allow you to control which stories are included in your Storybook, enabling many different uses of the same total set of stories. For example, you can use tags to include/exclude tests from the [test runner](../writing-tests/test-runner.md#run-tests-for-a-subset-of-stories). For more complex use cases, see the [recipes](#recipes) section, below.
 
-## Default tags
+## Built-in tags
 
-By default, the following tags are available in your project:
+The following tags are available in every Storybook project:
 
-- `dev`: Stories tagged with `dev` are rendered in the Storybook UI, but only in development mode. They do not appear in the sidebar in [production mode](../sharing/publish-storybook.md#build-storybook-as-a-static-web-application).
-- `docs`: Stories tagged with `docs` are rendered in the Storybook UI, but only in the [docs page](../writing-docs/autodocs.md). They do not appear in the sidebar.
-- `test`: Stories tagged with `test` are not rendered in the Storybook UI, in either development or production mode.
+| Tag        | Applied&nbsp;by&nbsp;default? | Description                                                                                                                                                                                                              |
+| ---------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| `autodocs` | No                            | Stories tagged with `autodocs` will be included in the [docs page](../writing-docs/autodocs.md). If a CSF file does not contain at least one story tagged with `autodocs`, that component will not generate a docs page. |
+| `dev`      | Yes                           | Stories tagged with `dev` are rendered in Storybook's sidebar.                                                                                                                                                           |
+| `test`     | Yes                           | Stories tagged with `test` do not currently affect Storybook's UI, but can be used to filter the [test runner](../writing-tests/test-runner.md#run-tests-for-a-subset-of-stories).                                       |
 
-## Custom tags
+The `dev` and `test` tags are automatically, implicitly applied to every story in your Storybook project.
 
-You can define your own tags by adding them to the [`tags` property](../api/main-config-tags.md) in your `main.js|ts` file. For example:
+## Applying tags
+
+A tag can be any string, either the [built-in tags](#built-in-tags) or custom tags of your own design. To apply tags to a story, assign an array of strings to the `tags` property. Tags may be applied at the project, component (meta), or story levels.
+
+For example, to apply the `autodocs` tag to all stories in your project, you can use `.storybook/preview.js|ts`:
 
 ```ts
-// .storybook/main.ts
-import { StorybookConfig } from '@storybook/<your-framework>';
+// .storybook/preview.ts
+import type { Preview } from '@storybook/your-framework';
 
-const config: StorybookConfig = {
-  // ...rest of config
-  tags: {
-    experimental: { description: 'Stories for experimental components or features' },
-  },
+const preview: Preview = {
+  // ...rest of preview
+  /**
+   * 👇 All stories in your project will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default)
+   *    - test (implicit default)
+   */
+  tags: ['autodocs'],
 };
 
-export default config;
+export default preview;
 ```
 
-## Tagging stories
-
-You tag stories by defining a `tags` array in the story or meta definitions:
+Within a component stories file, you apply tags like so:
 
 ```ts
 // Button.stories.ts
-import { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta = {
   component: Button,
-  // 👇 Stories in this file will only be included for development mode, not production
-  tags: ['dev'],
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
 } satisfies Meta<typeof Button>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const InternalStory: Story = {
+export const ExperimentalFeatureStory: Story = {
   /**
-   * 👇 This story inherits the tags from `meta` and defines its own,
-   *    making the applied tags `['dev', 'test']`.
-   *    It will not be included in the UI, only for testing environments
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
    */
-  tags: ['test'],
+  tags: ['experimental'],
 };
 ```
 
-If you want to add tags to all stories in your project, you can apply them in your `preview.js|ts` file:
+## Removing tags
+
+To remove a tag from a story, prefix it with `!`. For example:
 
 ```ts
-// .storybook/preview.ts
-import { Preview } from '@storybook/<your-framework>';
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
-const preview: Preview = {
-  // ...rest of preview
-  tags: ['dev'],
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
 };
+```
 
-export default preview;
+Tags can be removed for all stories in your project (in `.storybook/preview.js|ts`), all stories for a component (in the CSF file meta), or a single story (as above).
+
+## Recipes
+
+### Docs-only stories
+
+It can sometimes be helpful to provide example stories for documentation purposes, but you want to keep the sidebar navigation more focused on stories useful for development. By enabling the `autodocs` tag and removing the `dev` tag, a story becomes docs-only: appearing only in the [docs page](../writing-docs/autodocs.md) and not in Storybook's sidebar.
+
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+} satisfies Meta<typeof Button>;
+export default meta;
 ```
 
-### Removing tags
+### Combo stories, still tested individually
 
-To remove a tag from a story, prefix it with `!`. For example:
+For a component with many variants, like a Button, a grid of those variants all together can be a helpful way to visualize it. But you may wish to test the variants individually. You can accomplish this with tags like so:
 
 ```ts
 // Button.stories.ts
-import { Meta, StoryObj } from '@storybook/<your-framework>';
+import type { Meta, StoryObj } from '@storybook/your-framework';
 
 import { Button } from './Button';
 
 const meta = {
   component: Button,
-  // 👇 Stories in this file will only be included for development mode, not production
-  tags: ['dev'],
 } satisfies Meta<typeof Button>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const InternalStory: Story = {
-  // 👇 Remove the inherited `dev` tag by using the `!` prefix
-  tags: ['!dev'],
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+};
+
+// ... etc.
+
+export const Combo: Story = {
+  // 👇 This story should not be tested
+  tags: ['!test'],
+  render: () => {
+    // Variant1, Variant2, etc.
+  },
 };
 ```

From 348d23bf07852baf0e861d77fa993bee1c48faf6 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Mon, 6 May 2024 21:10:06 -0600
Subject: [PATCH 3/5] Mention badges addon

---
 docs/writing-stories/tags.md | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/docs/writing-stories/tags.md b/docs/writing-stories/tags.md
index e60c82ecf48e..06d8f4f2f700 100644
--- a/docs/writing-stories/tags.md
+++ b/docs/writing-stories/tags.md
@@ -2,7 +2,7 @@
 title: 'Tags'
 ---
 
-Tags allow you to control which stories are included in your Storybook, enabling many different uses of the same total set of stories. For example, you can use tags to include/exclude tests from the [test runner](../writing-tests/test-runner.md#run-tests-for-a-subset-of-stories). For more complex use cases, see the [recipes](#recipes) section, below.
+Tags allow you to control which stories are included in your Storybook, enabling many different uses of the same total set of stories. For example, you can use tags to include/exclude tests from the [test runner](../writing-tests/test-runner.md#run-tests-for-a-subset-of-stories) or display [badges](https://storybook.js.org/addons/@geometricpanda/storybook-addon-badges/). For more complex use cases, see the [recipes](#recipes) section, below.
 
 ## Built-in tags
 
@@ -76,7 +76,7 @@ export const ExperimentalFeatureStory: Story = {
 
 ## Removing tags
 
-To remove a tag from a story, prefix it with `!`. For example:
+To remove a tag from a story, prefix it with `!`. For example, we can apply the `stable` tag to all stories in a file except one, which has the `experimental` tag:
 
 ```ts
 // Button.stories.ts
@@ -102,6 +102,12 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
+<Callout variant="info">
+
+Tags like `stable` and `experimental` work very well with an addon like [badges](https://storybook.js.org/addons/@geometricpanda/storybook-addon-badges/).
+
+</Callout>
+
 Tags can be removed for all stories in your project (in `.storybook/preview.js|ts`), all stories for a component (in the CSF file meta), or a single story (as above).
 
 ## Recipes

From 25ed3c27a24362beb3e2d3f3a820ab298e6282a3 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 7 May 2024 09:20:43 -0600
Subject: [PATCH 4/5] Snippetize examples

---
 .../angular/tags-autodocs-in-meta.ts.mdx      |  13 ++
 .../tags-autodocs-remove-component.ts.mdx     |  13 ++
 .../angular/tags-autodocs-remove-story.ts.mdx |  20 ++
 .../angular/tags-combo-example.ts.mdx         |  41 ++++
 .../angular/tags-docs-only-in-meta.ts.mdx     |  17 ++
 .../angular/tags-in-meta-and-story.ts.mdx     |  31 +++
 .../angular/tags-remove-in-story.ts.mdx       |  23 +++
 .../common/tags-autodocs-in-meta.js.mdx       |  10 +
 .../common/tags-autodocs-in-meta.ts-4-9.mdx   |  14 ++
 .../common/tags-autodocs-in-meta.ts.mdx       |  14 ++
 .../common/tags-autodocs-in-preview.js.mdx    |   8 +
 .../common/tags-autodocs-in-preview.ts.mdx    |  13 ++
 .../tags-autodocs-remove-component.js.mdx     |  10 +
 .../tags-autodocs-remove-component.ts-4-9.mdx |  14 ++
 .../tags-autodocs-remove-component.ts.mdx     |  14 ++
 .../common/tags-autodocs-remove-story.js.mdx  |  15 ++
 .../tags-autodocs-remove-story.ts-4-9.mdx     |  21 ++
 .../common/tags-autodocs-remove-story.ts.mdx  |  21 ++
 .../common/tags-docs-only-in-meta.js.mdx      |  14 ++
 .../common/tags-docs-only-in-meta.ts-4-9.mdx  |  18 ++
 .../common/tags-docs-only-in-meta.ts.mdx      |  18 ++
 .../common/tags-in-meta-and-story.js.mdx      |  26 +++
 .../common/tags-in-meta-and-story.ts-4-9.mdx  |  32 ++++
 .../common/tags-in-meta-and-story.ts.mdx      |  32 ++++
 docs/snippets/common/tags-in-preview.js.mdx   |  13 ++
 docs/snippets/common/tags-in-preview.ts.mdx   |  18 ++
 .../common/tags-remove-in-story.js.mdx        |  18 ++
 .../common/tags-remove-in-story.ts-4-9.mdx    |  24 +++
 .../common/tags-remove-in-story.ts.mdx        |  24 +++
 docs/snippets/react/tags-combo-example.js.mdx |  34 ++++
 .../react/tags-combo-example.ts-4-9.mdx       |  39 ++++
 docs/snippets/react/tags-combo-example.ts.mdx |  39 ++++
 docs/snippets/solid/tags-combo-example.js.mdx |  34 ++++
 .../solid/tags-combo-example.ts-4-9.mdx       |  39 ++++
 docs/snippets/solid/tags-combo-example.ts.mdx |  39 ++++
 docs/snippets/vue/tags-combo-example.js.mdx   |  37 ++++
 .../vue/tags-combo-example.ts-4-9.mdx         |  42 ++++
 docs/snippets/vue/tags-combo-example.ts.mdx   |  42 ++++
 .../tags-autodocs-in-meta.js.mdx              |   9 +
 .../tags-autodocs-in-meta.ts.mdx              |  12 ++
 .../tags-autodocs-remove-component.js.mdx     |   9 +
 .../tags-autodocs-remove-component.ts.mdx     |  12 ++
 .../tags-autodocs-remove-story.js.mdx         |  14 ++
 .../tags-autodocs-remove-story.ts.mdx         |  19 ++
 .../web-components/tags-combo-example.js.mdx  |  35 ++++
 .../web-components/tags-combo-example.ts.mdx  |  39 ++++
 .../tags-docs-only-in-meta.js.mdx             |  13 ++
 .../tags-docs-only-in-meta.ts.mdx             |  16 ++
 .../tags-in-meta-and-story.js.mdx             |  25 +++
 .../tags-in-meta-and-story.ts.mdx             |  30 +++
 .../tags-remove-in-story.js.mdx               |  17 ++
 .../tags-remove-in-story.ts.mdx               |  22 +++
 docs/writing-docs/autodocs.md                 |  90 ++++-----
 docs/writing-stories/tags.md                  | 179 ++++++------------
 54 files changed, 1269 insertions(+), 166 deletions(-)
 create mode 100644 docs/snippets/angular/tags-autodocs-in-meta.ts.mdx
 create mode 100644 docs/snippets/angular/tags-autodocs-remove-component.ts.mdx
 create mode 100644 docs/snippets/angular/tags-autodocs-remove-story.ts.mdx
 create mode 100644 docs/snippets/angular/tags-combo-example.ts.mdx
 create mode 100644 docs/snippets/angular/tags-docs-only-in-meta.ts.mdx
 create mode 100644 docs/snippets/angular/tags-in-meta-and-story.ts.mdx
 create mode 100644 docs/snippets/angular/tags-remove-in-story.ts.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-in-meta.js.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-in-meta.ts.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-in-preview.js.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-in-preview.ts.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-remove-component.js.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-remove-component.ts.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-remove-story.js.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx
 create mode 100644 docs/snippets/common/tags-autodocs-remove-story.ts.mdx
 create mode 100644 docs/snippets/common/tags-docs-only-in-meta.js.mdx
 create mode 100644 docs/snippets/common/tags-docs-only-in-meta.ts-4-9.mdx
 create mode 100644 docs/snippets/common/tags-docs-only-in-meta.ts.mdx
 create mode 100644 docs/snippets/common/tags-in-meta-and-story.js.mdx
 create mode 100644 docs/snippets/common/tags-in-meta-and-story.ts-4-9.mdx
 create mode 100644 docs/snippets/common/tags-in-meta-and-story.ts.mdx
 create mode 100644 docs/snippets/common/tags-in-preview.js.mdx
 create mode 100644 docs/snippets/common/tags-in-preview.ts.mdx
 create mode 100644 docs/snippets/common/tags-remove-in-story.js.mdx
 create mode 100644 docs/snippets/common/tags-remove-in-story.ts-4-9.mdx
 create mode 100644 docs/snippets/common/tags-remove-in-story.ts.mdx
 create mode 100644 docs/snippets/react/tags-combo-example.js.mdx
 create mode 100644 docs/snippets/react/tags-combo-example.ts-4-9.mdx
 create mode 100644 docs/snippets/react/tags-combo-example.ts.mdx
 create mode 100644 docs/snippets/solid/tags-combo-example.js.mdx
 create mode 100644 docs/snippets/solid/tags-combo-example.ts-4-9.mdx
 create mode 100644 docs/snippets/solid/tags-combo-example.ts.mdx
 create mode 100644 docs/snippets/vue/tags-combo-example.js.mdx
 create mode 100644 docs/snippets/vue/tags-combo-example.ts-4-9.mdx
 create mode 100644 docs/snippets/vue/tags-combo-example.ts.mdx
 create mode 100644 docs/snippets/web-components/tags-autodocs-in-meta.js.mdx
 create mode 100644 docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx
 create mode 100644 docs/snippets/web-components/tags-autodocs-remove-component.js.mdx
 create mode 100644 docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx
 create mode 100644 docs/snippets/web-components/tags-autodocs-remove-story.js.mdx
 create mode 100644 docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx
 create mode 100644 docs/snippets/web-components/tags-combo-example.js.mdx
 create mode 100644 docs/snippets/web-components/tags-combo-example.ts.mdx
 create mode 100644 docs/snippets/web-components/tags-docs-only-in-meta.js.mdx
 create mode 100644 docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx
 create mode 100644 docs/snippets/web-components/tags-in-meta-and-story.js.mdx
 create mode 100644 docs/snippets/web-components/tags-in-meta-and-story.ts.mdx
 create mode 100644 docs/snippets/web-components/tags-remove-in-story.js.mdx
 create mode 100644 docs/snippets/web-components/tags-remove-in-story.ts.mdx

diff --git a/docs/snippets/angular/tags-autodocs-in-meta.ts.mdx b/docs/snippets/angular/tags-autodocs-in-meta.ts.mdx
new file mode 100644
index 000000000000..1afc429fd28b
--- /dev/null
+++ b/docs/snippets/angular/tags-autodocs-in-meta.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// Button.stories.ts
+import type { Meta } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/angular/tags-autodocs-remove-component.ts.mdx b/docs/snippets/angular/tags-autodocs-remove-component.ts.mdx
new file mode 100644
index 000000000000..25615ed92370
--- /dev/null
+++ b/docs/snippets/angular/tags-autodocs-remove-component.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// Page.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Page } from './Page';
+
+const meta: Meta<Page> = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/angular/tags-autodocs-remove-story.ts.mdx b/docs/snippets/angular/tags-autodocs-remove-story.ts.mdx
new file mode 100644
index 000000000000..2feae3bb2de0
--- /dev/null
+++ b/docs/snippets/angular/tags-autodocs-remove-story.ts.mdx
@@ -0,0 +1,20 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/angular/tags-combo-example.ts.mdx b/docs/snippets/angular/tags-combo-example.ts.mdx
new file mode 100644
index 000000000000..bc239f26aeff
--- /dev/null
+++ b/docs/snippets/angular/tags-combo-example.ts.mdx
@@ -0,0 +1,41 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => ({
+    template: `
+      <div>
+        <demo-button variant={1}>
+        <demo-button variant={2}>
+        <!-- Etc... -->
+      </div>
+    `,
+  }),
+};
+```
diff --git a/docs/snippets/angular/tags-docs-only-in-meta.ts.mdx b/docs/snippets/angular/tags-docs-only-in-meta.ts.mdx
new file mode 100644
index 000000000000..4301749a3f29
--- /dev/null
+++ b/docs/snippets/angular/tags-docs-only-in-meta.ts.mdx
@@ -0,0 +1,17 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+```
diff --git a/docs/snippets/angular/tags-in-meta-and-story.ts.mdx b/docs/snippets/angular/tags-in-meta-and-story.ts.mdx
new file mode 100644
index 000000000000..bf6a2593ff8b
--- /dev/null
+++ b/docs/snippets/angular/tags-in-meta-and-story.ts.mdx
@@ -0,0 +1,31 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/angular/tags-remove-in-story.ts.mdx b/docs/snippets/angular/tags-remove-in-story.ts.mdx
new file mode 100644
index 000000000000..cb88b232e7a1
--- /dev/null
+++ b/docs/snippets/angular/tags-remove-in-story.ts.mdx
@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './Button';
+
+const meta: Meta<Button> = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/snippets/common/tags-autodocs-in-meta.js.mdx b/docs/snippets/common/tags-autodocs-in-meta.js.mdx
new file mode 100644
index 000000000000..2c9e2c8cfcef
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-in-meta.js.mdx
@@ -0,0 +1,10 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+```
diff --git a/docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx b/docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx
new file mode 100644
index 000000000000..c9e29ff65944
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-in-meta.ts-4-9.mdx
@@ -0,0 +1,14 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```
diff --git a/docs/snippets/common/tags-autodocs-in-meta.ts.mdx b/docs/snippets/common/tags-autodocs-in-meta.ts.mdx
new file mode 100644
index 000000000000..65a0a970da47
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-in-meta.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/common/tags-autodocs-in-preview.js.mdx b/docs/snippets/common/tags-autodocs-in-preview.js.mdx
new file mode 100644
index 000000000000..16c126846bbb
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-in-preview.js.mdx
@@ -0,0 +1,8 @@
+```js
+// .storybook/preview.js
+export default {
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+};
+```
diff --git a/docs/snippets/common/tags-autodocs-in-preview.ts.mdx b/docs/snippets/common/tags-autodocs-in-preview.ts.mdx
new file mode 100644
index 000000000000..65ec88121ab1
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-in-preview.ts.mdx
@@ -0,0 +1,13 @@
+```ts
+// .storybook/preview.ts
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import type { Preview } from '@storybook/your-renderer';
+
+const preview: Preview = {
+  // ...rest of preview
+  //👇 Enables auto-generated documentation for all stories
+  tags: ['autodocs'],
+};
+
+export default preview;
+```
diff --git a/docs/snippets/common/tags-autodocs-remove-component.js.mdx b/docs/snippets/common/tags-autodocs-remove-component.js.mdx
new file mode 100644
index 000000000000..650cedc359d5
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-remove-component.js.mdx
@@ -0,0 +1,10 @@
+```js
+// Page.stories.js
+import { Page } from './Page';
+
+export default {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx b/docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx
new file mode 100644
index 000000000000..35db4e3e0606
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-remove-component.ts-4-9.mdx
@@ -0,0 +1,14 @@
+```ts
+// Page.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Page } from './Page';
+
+const meta = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+} satisfies Meta<typeof Page>;
+export default meta;
+```
diff --git a/docs/snippets/common/tags-autodocs-remove-component.ts.mdx b/docs/snippets/common/tags-autodocs-remove-component.ts.mdx
new file mode 100644
index 000000000000..82f93e9e4fca
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-remove-component.ts.mdx
@@ -0,0 +1,14 @@
+```ts
+// Page.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Page } from './Page';
+
+const meta: Meta<typeof Page> = {
+  component: Page,
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/common/tags-autodocs-remove-story.js.mdx b/docs/snippets/common/tags-autodocs-remove-story.js.mdx
new file mode 100644
index 000000000000..ad8db3ec45cd
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-remove-story.js.mdx
@@ -0,0 +1,15 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+
+export const UndocumentedStory = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx b/docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx
new file mode 100644
index 000000000000..008103a8f7ab
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-remove-story.ts-4-9.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/common/tags-autodocs-remove-story.ts.mdx b/docs/snippets/common/tags-autodocs-remove-story.ts.mdx
new file mode 100644
index 000000000000..df76e38e6683
--- /dev/null
+++ b/docs/snippets/common/tags-autodocs-remove-story.ts.mdx
@@ -0,0 +1,21 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/common/tags-docs-only-in-meta.js.mdx b/docs/snippets/common/tags-docs-only-in-meta.js.mdx
new file mode 100644
index 000000000000..e2c36420e943
--- /dev/null
+++ b/docs/snippets/common/tags-docs-only-in-meta.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+```
diff --git a/docs/snippets/common/tags-docs-only-in-meta.ts-4-9.mdx b/docs/snippets/common/tags-docs-only-in-meta.ts-4-9.mdx
new file mode 100644
index 000000000000..4671c491cf53
--- /dev/null
+++ b/docs/snippets/common/tags-docs-only-in-meta.ts-4-9.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+} satisfies Meta<typeof Button>;
+export default meta;
+```
diff --git a/docs/snippets/common/tags-docs-only-in-meta.ts.mdx b/docs/snippets/common/tags-docs-only-in-meta.ts.mdx
new file mode 100644
index 000000000000..d1ec280838e3
--- /dev/null
+++ b/docs/snippets/common/tags-docs-only-in-meta.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+```
diff --git a/docs/snippets/common/tags-in-meta-and-story.js.mdx b/docs/snippets/common/tags-in-meta-and-story.js.mdx
new file mode 100644
index 000000000000..60eea072dd93
--- /dev/null
+++ b/docs/snippets/common/tags-in-meta-and-story.js.mdx
@@ -0,0 +1,26 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export const ExperimentalFeatureStory = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/common/tags-in-meta-and-story.ts-4-9.mdx b/docs/snippets/common/tags-in-meta-and-story.ts-4-9.mdx
new file mode 100644
index 000000000000..b984c2ed8697
--- /dev/null
+++ b/docs/snippets/common/tags-in-meta-and-story.ts-4-9.mdx
@@ -0,0 +1,32 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/common/tags-in-meta-and-story.ts.mdx b/docs/snippets/common/tags-in-meta-and-story.ts.mdx
new file mode 100644
index 000000000000..7a3cbeae8207
--- /dev/null
+++ b/docs/snippets/common/tags-in-meta-and-story.ts.mdx
@@ -0,0 +1,32 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/common/tags-in-preview.js.mdx b/docs/snippets/common/tags-in-preview.js.mdx
new file mode 100644
index 000000000000..f66c9a1214f4
--- /dev/null
+++ b/docs/snippets/common/tags-in-preview.js.mdx
@@ -0,0 +1,13 @@
+```js
+// .storybook/preview.js
+export default {
+  // ...rest of preview
+  /**
+   * 👇 All stories in your project will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default)
+   *    - test (implicit default)
+   */
+  tags: ['autodocs'],
+};
+```
diff --git a/docs/snippets/common/tags-in-preview.ts.mdx b/docs/snippets/common/tags-in-preview.ts.mdx
new file mode 100644
index 000000000000..0f1629c0e92d
--- /dev/null
+++ b/docs/snippets/common/tags-in-preview.ts.mdx
@@ -0,0 +1,18 @@
+```ts
+// .storybook/preview.ts
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import type { Preview } from '@storybook/your-renderer';
+
+const preview: Preview = {
+  // ...rest of preview
+  /**
+   * 👇 All stories in your project will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default)
+   *    - test (implicit default)
+   */
+  tags: ['autodocs'],
+};
+
+export default preview;
+```
diff --git a/docs/snippets/common/tags-remove-in-story.js.mdx b/docs/snippets/common/tags-remove-in-story.js.mdx
new file mode 100644
index 000000000000..b6d4466e8a31
--- /dev/null
+++ b/docs/snippets/common/tags-remove-in-story.js.mdx
@@ -0,0 +1,18 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export const ExperimentalFeatureStory = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/snippets/common/tags-remove-in-story.ts-4-9.mdx b/docs/snippets/common/tags-remove-in-story.ts-4-9.mdx
new file mode 100644
index 000000000000..b4b41b056993
--- /dev/null
+++ b/docs/snippets/common/tags-remove-in-story.ts-4-9.mdx
@@ -0,0 +1,24 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/snippets/common/tags-remove-in-story.ts.mdx b/docs/snippets/common/tags-remove-in-story.ts.mdx
new file mode 100644
index 000000000000..18c20c9089b9
--- /dev/null
+++ b/docs/snippets/common/tags-remove-in-story.ts.mdx
@@ -0,0 +1,24 @@
+```ts
+// Button.stories.ts
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/snippets/react/tags-combo-example.js.mdx b/docs/snippets/react/tags-combo-example.js.mdx
new file mode 100644
index 000000000000..f8f1b90add3a
--- /dev/null
+++ b/docs/snippets/react/tags-combo-example.js.mdx
@@ -0,0 +1,34 @@
+```jsx
+// Button.stories.jsx
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
+export const Variant1 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1}>
+      <Button variant={2}>
+      {/* Etc... */}
+    </>
+  ),
+};
+```
diff --git a/docs/snippets/react/tags-combo-example.ts-4-9.mdx b/docs/snippets/react/tags-combo-example.ts-4-9.mdx
new file mode 100644
index 000000000000..60b784b0b76a
--- /dev/null
+++ b/docs/snippets/react/tags-combo-example.ts-4-9.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1}>
+      <Button variant={2}>
+      {/* Etc... */}
+    </>
+  ),
+};
+```
diff --git a/docs/snippets/react/tags-combo-example.ts.mdx b/docs/snippets/react/tags-combo-example.ts.mdx
new file mode 100644
index 000000000000..2262f43b10f5
--- /dev/null
+++ b/docs/snippets/react/tags-combo-example.ts.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.tsx
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1}>
+      <Button variant={2}>
+      {/* Etc... */}
+    </>
+  ),
+};
+```
diff --git a/docs/snippets/solid/tags-combo-example.js.mdx b/docs/snippets/solid/tags-combo-example.js.mdx
new file mode 100644
index 000000000000..f8f1b90add3a
--- /dev/null
+++ b/docs/snippets/solid/tags-combo-example.js.mdx
@@ -0,0 +1,34 @@
+```jsx
+// Button.stories.jsx
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
+export const Variant1 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1}>
+      <Button variant={2}>
+      {/* Etc... */}
+    </>
+  ),
+};
+```
diff --git a/docs/snippets/solid/tags-combo-example.ts-4-9.mdx b/docs/snippets/solid/tags-combo-example.ts-4-9.mdx
new file mode 100644
index 000000000000..fdb6c96d68b7
--- /dev/null
+++ b/docs/snippets/solid/tags-combo-example.ts-4-9.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1}>
+      <Button variant={2}>
+      {/* Etc... */}
+    </>
+  ),
+};
+```
diff --git a/docs/snippets/solid/tags-combo-example.ts.mdx b/docs/snippets/solid/tags-combo-example.ts.mdx
new file mode 100644
index 000000000000..ff64fb913428
--- /dev/null
+++ b/docs/snippets/solid/tags-combo-example.ts.mdx
@@ -0,0 +1,39 @@
+```tsx
+// Button.stories.tsx
+import type { Meta, StoryObj } from 'storybook-solidjs';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => (
+    <>
+      <Button variant={1}>
+      <Button variant={2}>
+      {/* Etc... */}
+    </>
+  ),
+};
+```
diff --git a/docs/snippets/vue/tags-combo-example.js.mdx b/docs/snippets/vue/tags-combo-example.js.mdx
new file mode 100644
index 000000000000..9db1e0ad0387
--- /dev/null
+++ b/docs/snippets/vue/tags-combo-example.js.mdx
@@ -0,0 +1,37 @@
+```js
+// Button.stories.js
+import { Button } from './Button';
+
+export default {
+  component: Button,
+};
+
+export const Variant1 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button variant={1}>
+        <Button variant={2}>
+        <!-- Etc... -->
+      </div>
+    `,
+  }),
+};
+```
diff --git a/docs/snippets/vue/tags-combo-example.ts-4-9.mdx b/docs/snippets/vue/tags-combo-example.ts-4-9.mdx
new file mode 100644
index 000000000000..5d07a43808b0
--- /dev/null
+++ b/docs/snippets/vue/tags-combo-example.ts-4-9.mdx
@@ -0,0 +1,42 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button variant={1}>
+        <Button variant={2}>
+        <!-- Etc... -->
+      </div>
+    `,
+  }),
+};
+```
diff --git a/docs/snippets/vue/tags-combo-example.ts.mdx b/docs/snippets/vue/tags-combo-example.ts.mdx
new file mode 100644
index 000000000000..19874ca03d3f
--- /dev/null
+++ b/docs/snippets/vue/tags-combo-example.ts.mdx
@@ -0,0 +1,42 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => ({
+    components: { Button },
+    template: `
+      <div>
+        <Button variant={1}>
+        <Button variant={2}>
+        <!-- Etc... -->
+      </div>
+    `,
+  }),
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx b/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx
new file mode 100644
index 000000000000..2d583742ba05
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-in-meta.js.mdx
@@ -0,0 +1,9 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx b/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx
new file mode 100644
index 000000000000..8f22771a18be
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-in-meta.ts.mdx
@@ -0,0 +1,12 @@
+```ts
+// Button.stories.ts
+import type { Meta } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx b/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx
new file mode 100644
index 000000000000..39cb92375359
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-component.js.mdx
@@ -0,0 +1,9 @@
+```js
+// Page.stories.js
+export default {
+  title: 'Page',
+  component: 'demo-page',
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx b/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx
new file mode 100644
index 000000000000..8210e75a2ebc
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-component.ts.mdx
@@ -0,0 +1,12 @@
+```ts
+// Page.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Page',
+  component: 'demo-page',
+  // 👇 Disable auto-generated documentation for this component
+  tags: ['!autodocs'],
+};
+export default meta;
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx b/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx
new file mode 100644
index 000000000000..7f9e0c2cd176
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-story.js.mdx
@@ -0,0 +1,14 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+
+export const UndocumentedStory = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx b/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx
new file mode 100644
index 000000000000..e46bbf2e9b03
--- /dev/null
+++ b/docs/snippets/web-components/tags-autodocs-remove-story.ts.mdx
@@ -0,0 +1,19 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  //👇 Enables auto-generated documentation for this component and includes all stories in this file
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const UndocumentedStory: Story = {
+  // 👇 Removes this story from auto-generated documentation
+  tags: ['!autodocs'],
+};
+```
diff --git a/docs/snippets/web-components/tags-combo-example.js.mdx b/docs/snippets/web-components/tags-combo-example.js.mdx
new file mode 100644
index 000000000000..0558c0d5da66
--- /dev/null
+++ b/docs/snippets/web-components/tags-combo-example.js.mdx
@@ -0,0 +1,35 @@
+```ts
+// Button.stories.ts
+import { html } from 'lit';
+
+export default {
+  title: 'Button',
+  component: 'demo-button',
+};
+
+export const Variant1 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2 = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => html`
+    <div>
+      <demo-button variant="1">
+      <demo-button variant="2">
+      <!-- Etc... -->
+    </div>
+  `,
+};
+```
diff --git a/docs/snippets/web-components/tags-combo-example.ts.mdx b/docs/snippets/web-components/tags-combo-example.ts.mdx
new file mode 100644
index 000000000000..67265784bbba
--- /dev/null
+++ b/docs/snippets/web-components/tags-combo-example.ts.mdx
@@ -0,0 +1,39 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const Variant1: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 1 },
+};
+
+export const Variant2: Story = {
+  // 👇 This story will not appear in Storybook's sidebar or docs page
+  tags: ['!dev', '!docs'],
+  args: { variant: 2 },
+};
+
+// Etc...
+
+export const Combo: Story = {
+  // 👇 This story should not be tested, but will appear in the sidebar and docs page
+  tags: ['!test'],
+  render: () => html`
+    <div>
+      <demo-button variant="1">
+      <demo-button variant="2">
+      <!-- Etc... -->
+    </div>
+  `,
+};
+```
diff --git a/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx b/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx
new file mode 100644
index 000000000000..6618e9dd205c
--- /dev/null
+++ b/docs/snippets/web-components/tags-docs-only-in-meta.js.mdx
@@ -0,0 +1,13 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+```
diff --git a/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx b/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx
new file mode 100644
index 000000000000..a48803256500
--- /dev/null
+++ b/docs/snippets/web-components/tags-docs-only-in-meta.ts.mdx
@@ -0,0 +1,16 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will:
+   *    - Be included in the docs page
+   *    - Not appear in Storybook's sidebar
+   */
+  tags: ['autodocs', '!dev'],
+};
+export default meta;
+```
diff --git a/docs/snippets/web-components/tags-in-meta-and-story.js.mdx b/docs/snippets/web-components/tags-in-meta-and-story.js.mdx
new file mode 100644
index 000000000000..74e5be5e167a
--- /dev/null
+++ b/docs/snippets/web-components/tags-in-meta-and-story.js.mdx
@@ -0,0 +1,25 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export const ExperimentalFeatureStory = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx b/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx
new file mode 100644
index 000000000000..79d5f1f5ec55
--- /dev/null
+++ b/docs/snippets/web-components/tags-in-meta-and-story.ts.mdx
@@ -0,0 +1,30 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  /**
+   * 👇 All stories in this file will have these tags applied:
+   *    - autodocs
+   *    - dev (implicit default, inherited from preview)
+   *    - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 This particular story will have these tags applied:
+   *    - experimental
+   *    - autodocs (inherited from meta)
+   *    - dev (inherited from meta)
+   *    - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
diff --git a/docs/snippets/web-components/tags-remove-in-story.js.mdx b/docs/snippets/web-components/tags-remove-in-story.js.mdx
new file mode 100644
index 000000000000..acdc34f2b679
--- /dev/null
+++ b/docs/snippets/web-components/tags-remove-in-story.js.mdx
@@ -0,0 +1,17 @@
+```js
+// Button.stories.js
+export default {
+  title: 'Button',
+  component: 'demo-button',
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+
+export const ExperimentalFeatureStory = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/snippets/web-components/tags-remove-in-story.ts.mdx b/docs/snippets/web-components/tags-remove-in-story.ts.mdx
new file mode 100644
index 000000000000..99f56aceecd9
--- /dev/null
+++ b/docs/snippets/web-components/tags-remove-in-story.ts.mdx
@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+import type { Meta, StoryObj } from '@storybook/web-components';
+
+const meta: Meta = {
+  title: 'Button',
+  component: 'demo-button',
+  // 👇 Applies to all stories in this file
+  tags: ['stable'],
+};
+export default meta;
+
+type Story = StoryObj;
+
+export const ExperimentalFeatureStory: Story = {
+  /**
+   * 👇 For this particular story, remove the inherited
+   *    `stable` tag and apply the `experimental` tag
+   */
+  tags: ['!stable', 'experimental'],
+};
+```
diff --git a/docs/writing-docs/autodocs.md b/docs/writing-docs/autodocs.md
index 42ac5bc20dea..726a6a158579 100644
--- a/docs/writing-docs/autodocs.md
+++ b/docs/writing-docs/autodocs.md
@@ -16,72 +16,64 @@ Autodocs is configured through [tags](../writing-stories/tags.md). If a [CSF](..
 
 To enable automatic documentation for all stories in a project, add it to `tags` in your `.storybook/preview.js|ts` file:
 
-```ts
-// .storybook/preview.ts
-import type { Preview } from '@storybook/your-framework';
+<!-- prettier-ignore-start -->
 
-const preview: Preview = {
-  // ...rest of preview
-  //👇 Enables auto-generated documentation for all stories
-  tags: ['autodocs'],
-};
+<CodeSnippets
+  paths={[
+    'common/tags-autodocs-in-preview.js.mdx',
+    'common/tags-autodocs-in-preview.ts.mdx',
+  ]}
+/>
 
-export default preview;
-```
+<!-- prettier-ignore-end -->
 
 You can also enable it at the component (or story) level:
 
-```ts
-import type { Meta } from '@storybook/your-framework';
+<!-- prettier-ignore-start -->
 
-import { Button } from './Button';
+<CodeSnippets
+  paths={[
+    'common/tags-autodocs-in-meta.js.mdx',
+    'common/tags-autodocs-in-meta.ts.mdx',
+    'angular/tags-autodocs-in-meta.ts.mdx',
+    'web-components/tags-autodocs-in-meta.ts.mdx',
+    'web-components/tags-autodocs-in-meta.ts.mdx',
+  ]}
+/>
 
-const meta = {
-  component: Button,
-  //👇 Enables auto-generated documentation for this component and includes all stories in this file
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-export default meta;
-```
+<!-- prettier-ignore-end -->
 
 You can disable auto docs for a particular component by [removing the tag](../writing-stories/tags.md#removing-tags):
 
-```ts
-// Page.stories.ts
-import type { Meta, StoryObj } from '@storybook/your-framework';
+<!-- prettier-ignore-start -->
 
-import { Page } from './Page';
+<CodeSnippets
+  paths={[
+    'common/tags-autodocs-remove-component.js.mdx',
+    'common/tags-autodocs-remove-component.ts.mdx',
+    'angular/tags-autodocs-remove-component.ts.mdx',
+    'web-components/tags-autodocs-remove-component.ts.mdx',
+    'web-components/tags-autodocs-remove-component.ts.mdx',
+  ]}
+/>
 
-const meta = {
-  component: Page,
-  // 👇 Disable auto-generated documentation for this component
-  tags: ['!autodocs'],
-} satisfies Meta<typeof Page>;
-export default meta;
-```
+<!-- prettier-ignore-end -->
 
 Similarly, you can exclude a particular story from the auto docs page, by removing the tag:
 
-```ts
-// Button.stories.ts
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  //👇 Enables auto-generated documentation for this component and includes all stories in this file
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-export default meta;
+<!-- prettier-ignore-start -->
 
-type Story = StoryObj<typeof meta>;
+<CodeSnippets
+  paths={[
+    'common/tags-autodocs-remove-story.js.mdx',
+    'common/tags-autodocs-remove-story.ts.mdx',
+    'angular/tags-autodocs-remove-story.ts.mdx',
+    'web-components/tags-autodocs-remove-story.ts.mdx',
+    'web-components/tags-autodocs-remove-story.ts.mdx',
+  ]}
+/>
 
-export const UndocumentedStory = {
-  // 👇 Removes this story from auto-generated documentation
-  tags: ['!autodocs'],
-};
-```
+<!-- prettier-ignore-end -->
 
 ### Configure
 
diff --git a/docs/writing-stories/tags.md b/docs/writing-stories/tags.md
index 06d8f4f2f700..00727f12c996 100644
--- a/docs/writing-stories/tags.md
+++ b/docs/writing-stories/tags.md
@@ -22,85 +22,50 @@ A tag can be any string, either the [built-in tags](#built-in-tags) or custom ta
 
 For example, to apply the `autodocs` tag to all stories in your project, you can use `.storybook/preview.js|ts`:
 
-```ts
-// .storybook/preview.ts
-import type { Preview } from '@storybook/your-framework';
-
-const preview: Preview = {
-  // ...rest of preview
-  /**
-   * 👇 All stories in your project will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default)
-   *    - test (implicit default)
-   */
-  tags: ['autodocs'],
-};
-
-export default preview;
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'common/tags-in-preview.js.mdx',
+    'common/tags-in-preview.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->
 
 Within a component stories file, you apply tags like so:
 
-```ts
-// Button.stories.ts
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-  /**
-   * 👇 All stories in this file will have these tags applied:
-   *    - autodocs
-   *    - dev (implicit default, inherited from preview)
-   *    - test (implicit default, inherited from preview)
-   */
-  tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 This particular story will have these tags applied:
-   *    - experimental
-   *    - autodocs (inherited from meta)
-   *    - dev (inherited from meta)
-   *    - test (inherited from meta)
-   */
-  tags: ['experimental'],
-};
-```
+<!-- prettier-ignore-start -->
 
-## Removing tags
+<CodeSnippets
+  paths={[
+    'common/tags-in-meta-and-story.js.mdx',
+    'common/tags-in-meta-and-story.ts.mdx',
+    'angular/tags-in-meta-and-story.ts.mdx',
+    'web-components/tags-in-meta-and-story.ts.mdx',
+    'web-components/tags-in-meta-and-story.ts.mdx',
+  ]}
+/>
 
-To remove a tag from a story, prefix it with `!`. For example, we can apply the `stable` tag to all stories in a file except one, which has the `experimental` tag:
+<!-- prettier-ignore-end -->
 
-```ts
-// Button.stories.ts
-import type { Meta, StoryObj } from '@storybook/your-framework';
+## Removing tags
 
-import { Button } from './Button';
+To remove a tag from a story, prefix it with `!`. For example, we can apply the `stable` tag to all stories in a file except one, which has the `experimental` tag:
 
-const meta = {
-  component: Button,
-  // 👇 Applies to all stories in this file
-  tags: ['stable'],
-} satisfies Meta<typeof Button>;
-export default meta;
+<!-- prettier-ignore-start -->
 
-type Story = StoryObj<typeof meta>;
+<CodeSnippets
+  paths={[
+    'common/tags-remove-in-story.js.mdx',
+    'common/tags-remove-in-story.ts.mdx',
+    'angular/tags-remove-in-story.ts.mdx',
+    'web-components/tags-remove-in-story.ts.mdx',
+    'web-components/tags-remove-in-story.ts.mdx',
+  ]}
+/>
 
-export const ExperimentalFeatureStory: Story = {
-  /**
-   * 👇 For this particular story, remove the inherited
-   *    `stable` tag and apply the `experimental` tag
-   */
-  tags: ['!stable', 'experimental'],
-};
-```
+<!-- prettier-ignore-end -->
 
 <Callout variant="info">
 
@@ -116,58 +81,38 @@ Tags can be removed for all stories in your project (in `.storybook/preview.js|t
 
 It can sometimes be helpful to provide example stories for documentation purposes, but you want to keep the sidebar navigation more focused on stories useful for development. By enabling the `autodocs` tag and removing the `dev` tag, a story becomes docs-only: appearing only in the [docs page](../writing-docs/autodocs.md) and not in Storybook's sidebar.
 
-```ts
-// Button.stories.ts
-import type { Meta, StoryObj } from '@storybook/your-framework';
+<!-- prettier-ignore-start -->
 
-import { Button } from './Button';
+<CodeSnippets
+  paths={[
+    'common/tags-docs-only-in-meta.js.mdx',
+    'common/tags-docs-only-in-meta.ts.mdx',
+    'angular/tags-docs-only-in-meta.ts.mdx',
+    'web-components/tags-docs-only-in-meta.ts.mdx',
+    'web-components/tags-docs-only-in-meta.ts.mdx',
+  ]}
+/>
 
-const meta = {
-  component: Button,
-  /**
-   * 👇 All stories in this file will:
-   *    - Be included in the docs page
-   *    - Not appear in Storybook's sidebar
-   */
-  tags: ['autodocs', '!dev'],
-} satisfies Meta<typeof Button>;
-export default meta;
-```
+<!-- prettier-ignore-end -->
 
 ### Combo stories, still tested individually
 
 For a component with many variants, like a Button, a grid of those variants all together can be a helpful way to visualize it. But you may wish to test the variants individually. You can accomplish this with tags like so:
 
-```ts
-// Button.stories.ts
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta = {
-  component: Button,
-} satisfies Meta<typeof Button>;
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Variant1: Story = {
-  // 👇 This story will not appear in Storybook's sidebar or docs page
-  tags: ['!dev', '!docs'],
-};
-
-export const Variant2: Story = {
-  // 👇 This story will not appear in Storybook's sidebar or docs page
-  tags: ['!dev', '!docs'],
-};
-
-// ... etc.
-
-export const Combo: Story = {
-  // 👇 This story should not be tested
-  tags: ['!test'],
-  render: () => {
-    // Variant1, Variant2, etc.
-  },
-};
-```
+<!-- prettier-ignore-start -->
+
+<CodeSnippets
+  paths={[
+    'react/tags-combo-example.js.mdx',
+    'react/tags-combo-example.ts.mdx',
+    'vue/tags-combo-example.js.mdx',
+    'vue/tags-combo-example.ts.mdx',
+    'angular/tags-combo-example.ts.mdx',
+    'web-components/tags-combo-example.js.mdx',
+    'web-components/tags-combo-example.ts.mdx',
+    'solid/tags-combo-example.js.mdx',
+    'solid/tags-combo-example.ts.mdx',
+  ]}
+/>
+
+<!-- prettier-ignore-end -->

From 34c0e17bd47159c45d47d6fc65a7d8af9f110fdb Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Tue, 7 May 2024 10:13:10 -0600
Subject: [PATCH 5/5] Address feedback

- Clarify static nature of tags
---
 docs/writing-stories/tags.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/writing-stories/tags.md b/docs/writing-stories/tags.md
index 00727f12c996..c5e27d3a20ac 100644
--- a/docs/writing-stories/tags.md
+++ b/docs/writing-stories/tags.md
@@ -18,7 +18,7 @@ The `dev` and `test` tags are automatically, implicitly applied to every story i
 
 ## Applying tags
 
-A tag can be any string, either the [built-in tags](#built-in-tags) or custom tags of your own design. To apply tags to a story, assign an array of strings to the `tags` property. Tags may be applied at the project, component (meta), or story levels.
+A tag can be any static (i.e. not created dynamically) string, either the [built-in tags](#built-in-tags) or custom tags of your own design. To apply tags to a story, assign an array of strings to the `tags` property. Tags may be applied at the project, component (meta), or story levels.
 
 For example, to apply the `autodocs` tag to all stories in your project, you can use `.storybook/preview.js|ts`: